React中使用componentDidMount读取本地JSON文件数据的问题

嗨，各位技术同仁！针对你遇到的React读取本地JSON到state的问题，我来给你梳理下解决方案~

你目前的两个核心问题：一是JSON文件的调用路径是否正确，二是如何正确实现读取功能，咱们逐个解决：

为什么你的fetch调用可能失败？ #

在Create React App这类基于Webpack的项目中，fetch API默认是从项目根目录下的public文件夹读取静态资源的。你把flying.json和app.js放在src目录同级，这个位置fetch是访问不到的，这就是问题的根源。

两种可行的解决方案 #

方案一：直接导入JSON文件（推荐，更简单） #

Webpack支持直接导入JSON文件，会自动把它解析成JavaScript对象，完全不需要用fetch。修改你的app.js代码如下：

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import { CardList } from './../card-list/card-list'
import STYLES from './App.scss';
import Header from './../Header';
// 直接导入同级的JSON文件
import flyingData from './flying.json';

class App extends React.Component {
  constructor() {
    super();
    // 初始state改成空对象，因为JSON是包含两个数组的对象，而非数组
    this.state = { tester: {} };
  }

  componentDidMount() {
    // 直接把导入的JSON数据存入state
    this.setState({ tester: flyingData });
  }

  render() {
    return (
      <div style={{backgroundColor:'grey'}}>
        <Header />
        {/* 现在tester里包含itineraries和legs，CardList组件可以按需访问 */}
        <CardList tester={this.state.tester}/>
      </div>
    )
  }
}

export default App

方案二：调整文件位置后用fetch #

如果你更倾向于用fetch，只需要把flying.json移动到项目根目录的public文件夹下（没有的话新建一个），然后给fetch加上错误处理，避免默默失败：

componentDidMount() {
  fetch('flying.json')
    .then(response => {
      // 先判断请求是否成功
      if (!response.ok) {
        throw new Error('加载JSON文件失败');
      }
      return response.json();
    })
    .then(data => this.setState({ tester: data }))
    .catch(err => console.log('出错啦:', err));
}

额外提醒 #

你的初始state设置的是{ tester: [] }，但实际JSON是一个包含itineraries和legs两个数组的对象，所以建议把初始state改成{ tester: {} }，这样数据结构更匹配，后续在CardList组件里可以通过props.tester.itineraries来获取行程数据，props.tester.legs来获取航班段数据~

内容的提问来源于stack exchange，提问作者jitsujoseph