Question

我的第一个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"
      }
    ]
  }
]}

我正在收到此错误：

I AM GETTING THIS ERROR

1   未处理的拒绝（SyntaxError）：JSON中位置0处的意外令牌<   （匿名功能）   D：/development/js-projects/material-tutorial/src/Components/TrialForm/FlightSearch.js：13     10 |
    11 | componentDidMount（）{
    12 | fetch（'../ JsonFiles / routes.json'）。   13 |然后（response => response.json（））。     14 |然后（findresponse => this.setState（{data：findresponse.data}））;     15 |
    16 |

Answer 1

您可以导入JSON文件。

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

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

constructor() {
  super();
  this.state = {
      data: jsonFile
  }
}

Answer 2

es2015版本：

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

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

使用reactjs获取本地json数据

2 个答案: