使用 reactjs 获取本地 json 数据答案

【问题标题】：Getting local json data with reactjs使用 reactjs 获取本地 json 数据
【发布时间】：2018-07-03 13:48:20
【问题描述】：

我在第一个 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)：意外的令牌 11 |组件DidMount(){
12 |获取（'../JsonFiles/routes.json'）。 13 |然后（响应 => response.json()）。 14 |然后(findresponse => this.setState ({ data: findresponse.data })); 15 |
16 |

【问题讨论】：

可以试试绝对路径吗？像这样：/home/test/user/JsonFiles/routes.json请在描述中指定你的json文件路径。

标签： json reactjs react-router react-redux data-mapping

【解决方案1】：

您可以导入 JSON 文件。

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

在构造函数中定义状态：

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

【讨论】：

谢谢。在您发表评论之前，我像您的解决方案一样解决了它。不过，感谢您的贡献。

【解决方案2】：

es2015版本：

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

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

【讨论】：