0

我在第一个 reactjs 工作中遇到 json 错误。这对我和我是候选人的工作非常重要。我怎样才能解决这个问题？十分感谢。

相关类：

constructor() {
  super();
  this.state = {
      data:[],
  }
}
componentDidMount(){    
    fetch('../JsonFiles/routes.json').
    then(response => response.json()).
    then(findresponse => this.setState ({ data: findresponse.data }));
}

render() {
  return (
    <div>
        fasfasfa
        {
            this.state.data.map((dynamicData, key) =>
                <div>
                        <span> {dynamicData.routes.origin.cityName} </span>
                        <span> {dynamicData.routes.destinations[{}].cityName} </span>
                </div>                    
            )
        }
    </div>
  );
}

}

.json 文件：

{"routes": [
  {
    "origin": {
      "name": "Aalborg Airport",
      "country": "DK",
      "cityName": "Aalborg",
      "cityCode": "AAL"
    },
    "destinations": [
      {
        "name": "Bornholm Rønne",
        "country": "DK",
        "cityName": "Bornholm",
        "cityCode": "RNN"
      }
    ]
  },
  {
    "origin": {
      "name": "Barca",
      "country": "ES",
      "cityName": "Barcelona",
      "cityCode": "BCN"
    },
    "destinations": [
      {
        "name": "Borispol",
        "country": "UA",
        "cityName": "Kyiv",
        "cityCode": "KBP"
      }
    ]
  },
  {
    "origin": {
      "name": "Billund",
      "country": "DK",
      "cityName": "Billund",
      "cityCode": "BLL"
    },
    "destinations": [
      {
        "name": "Bornholm Rønne",
        "country": "DK",
        "cityName": "Bornholm",
        "cityCode": "RNN"
      },
      {
        "name": "København Kastrup",
        "country": "DK",
        "cityName": "Copenhagen",
        "cityCode": "CPH"
      },
      {
        "name": "Stavanger Sola",
        "country": "NO",
        "cityName": "Stavanger",
        "cityCode": "SVG"
      }
    ]
  },
  {
    "origin": {
      "name": "Bornholm Rønne",
      "country": "DK",
      "cityName": "Bornholm",
      "cityCode": "RNN"
    },
    "destinations": [
      {
        "name": "Aalborg Airport",
        "country": "DK",
        "cityName": "Aalborg",
        "cityCode": "AAL"
      },
      {
        "name": "Billund",
        "country": "DK",
        "cityName": "Billund",
        "cityCode": "BLL"
      },
      {
        "name": "København Kastrup",
        "country": "DK",
        "cityName": "Copenhagen",
        "cityCode": "CPH"
      },
      {
        "name": "Midtjyllands Lufthavn (Karup)",
        "country": "DK",
        "cityName": "Midtjyllands Lufthavn (Karup)",
        "cityCode": "KRP"
      },
      {
        "name": "Stavanger Sola",
        "country": "NO",
        "cityName": "Stavanger",
        "cityCode": "SVG"
      }
    ]
  },
  {
    "origin": {
      "name": "Charles de Gaulle",
      "country": "FR",
      "cityName": "Charles de Gaulle",
      "cityCode": "CDG"
    },
    "destinations": [
      {
        "name": "Billund",
        "country": "DK",
        "cityName": "Billund",
        "cityCode": "BLL"
      }
    ]
  },
  {
    "origin": {
      "name": "København Kastrup",
      "country": "DK",
      "cityName": "Copenhagen",
      "cityCode": "CPH"
    },
    "destinations": [
      {
        "name": "Billund",
        "country": "DK",
        "cityName": "Billund",
        "cityCode": "BLL"
      },
      {
        "name": "Bornholm Rønne",
        "country": "DK",
        "cityName": "Bornholm",
        "cityCode": "RNN"
      },
      {
        "name": "Midtjyllands Lufthavn (Karup)",
        "country": "DK",
        "cityName": "Midtjyllands Lufthavn (Karup)",
        "cityCode": "KRP"
      }
    ]
  },
  {
    "origin": {
      "name": "Esbjerg",
      "country": "DK",
      "cityName": "Esbjerg",
      "cityCode": "EBJ"
    },
    "destinations": [
      {
        "name": "Stavanger Sola",
        "country": "NO",
        "cityName": "Stavanger",
        "cityCode": "SVG"
      }
    ]
  },
  {
    "origin": {
      "name": "Borispol",
      "country": "UA",
      "cityName": "Kyiv",
      "cityCode": "KBP"
    },
    "destinations": [
      {
        "name": "Barca",
        "country": "ES",
        "cityName": "Barcelona",
        "cityCode": "BCN"
      }
    ]
  },
  {
    "origin": {
      "name": "Midtjyllands Lufthavn (Karup)",
      "country": "DK",
      "cityName": "Midtjyllands Lufthavn (Karup)",
      "cityCode": "KRP"
    },
    "destinations": [
      {
        "name": "Bornholm Rønne",
        "country": "DK",
        "cityName": "Bornholm",
        "cityCode": "RNN"
      },
      {
        "name": "København Kastrup",
        "country": "DK",
        "cityName": "Copenhagen",
        "cityCode": "CPH"
      }
    ]
  },
  {
    "origin": {
      "name": "Oslo Gardermoen",
      "country": "NO",
      "cityName": "Oslo",
      "cityCode": "OSL"
    },
    "destinations": [
      {
        "name": "Stord lufthavn, Sørstokken",
        "country": "NO",
        "cityName": "Stord",
        "cityCode": "SRP"
      },
      {
        "name": "Ørland",
        "country": "NO",
        "cityName": "Ørland",
        "cityCode": "OLA"
      }
    ]
  },
  {
    "origin": {
      "name": "Rhodos",
      "country": "GR",
      "cityName": "Rhodos",
      "cityCode": "RHO"
    },
    "destinations": [
      {
        "name": "Billund",
        "country": "DK",
        "cityName": "Billund",
        "cityCode": "BLL"
      }
    ]
  },
  {
    "origin": {
      "name": "Stavanger Sola",
      "country": "NO",
      "cityName": "Stavanger",
      "cityCode": "SVG"
    },
    "destinations": [
      {
        "name": "Billund",
        "country": "DK",
        "cityName": "Billund",
        "cityCode": "BLL"
      },
      {
        "name": "Bornholm Rønne",
        "country": "DK",
        "cityName": "Bornholm",
        "cityCode": "RNN"
      },
      {
        "name": "Esbjerg",
        "country": "DK",
        "cityName": "Esbjerg",
        "cityCode": "EBJ"
      }
    ]
  },
  {
    "origin": {
      "name": "Stord lufthavn, Sørstokken",
      "country": "NO",
      "cityName": "Stord",
      "cityCode": "SRP"
    },
    "destinations": [
      {
        "name": "Oslo Gardermoen",
        "country": "NO",
        "cityName": "Oslo",
        "cityCode": "OSL"
      }
    ]
  },
  {
    "origin": {
      "name": "Ørland",
      "country": "NO",
      "cityName": "Ørland",
      "cityCode": "OLA"
    },
    "destinations": [
      {
        "name": "Oslo Gardermoen",
        "country": "NO",
        "cityName": "Oslo",
        "cityCode": "OSL"
      }
    ]
  }
]}

我得到了这个错误：

我收到这个错误

1 未处理的拒绝（SyntaxError）：位置 0 的 JSON 中的意外标记 <（匿名函数） D:/development/js-projects/material-tutorial/src/Components/TrialForm/FlightSearch.js:13 10 |
11 | 组件DidMount(){
12 | 获取（'../JsonFiles/routes.json'）。13 | 然后（响应 => response.json()）。14 | 然后(findresponse => this.setState ({ data: findresponse.data })); 15 |
16 |

4

2 回答 2

1

您可以导入 JSON 文件。

import * as jsonFile from '../JsonFiles/routes.json';

在构造函数中定义它的状态：

constructor() {
  super();
  this.state = {
      data: jsonFile
  }
}
于 2018-07-03T14:07:55.917 回答
0

es2015版本：

import jsonFile from '../JsonFiles/routes.json';

现在您在“jsonFile”中拥有了所有可用的 json 数据，您可以在任何地方使用它。

于 2018-07-03T14:28:05.657 回答