使用 reactjs 获取本地 json 数据

Question

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

相关class:

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 Unhandled Rejection (SyntaxError): Unexpected token < in JSON at position 0 (anonymous function) D:/development/js-projects/material-tutorial/src/Components/TrialForm/FlightSearch.js:13 10 |
11 | componentDidMount(){
12 | fetch('../JsonFiles/routes.json'). 13 | then(response => response.json()). 14 | then(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 数据

Getting local json data with reactjs

json

reactjs

react-router

react-redux

data-mapping