Reactjs - 使用require在构造函数中加载json文件答案

【问题标题】：Reactjs - Loading json file in constructor with requireReactjs - 使用require在构造函数中加载json文件
【发布时间】：2019-12-30 08:31:38
【问题描述】：

这是下面的代码

//inside constructor    

this.state = {            
        id: props.id,
        name: props.name,
        dataLoaded: false,
        data: require('../data/'+props.id+'.json')
    }

安装组件后数据是否可用？还是是异步的还是同步的？

加载数据的方法是否正确？还是有更好的解决方案？

【问题讨论】：

你试过运行这段代码吗？你有错误吗？
它按预期工作。我可以将 componentDidMount 作为异步函数并获取 json。但不知道哪个是最好的方法。
如果您在此代码后立即添加console.log(this.state.data)，并且它会打印正确的数据，那么您可以确定它是同步的。
我认为你应该接受它。大多数人都使用了 fetch 方法，但是如果我们可以轻松地访问这样的文件，那么还需要 fetch 方法吗？因此，除非遇到任何问题，否则您应该继续使用它:)

标签： reactjs

【解决方案1】：

我可以看到两种方式。一种是如果您只使用“要求”来导入数据（可能是静态的）：我建议您结帐Webpack ...and this post。但是，如果您的目标是加载数据（可能是动态的），建议通过覆盖 componentDidMount() 方法来启动（可能需要时间）异步请求。不建议在构造函数中调用任何异步方法。执行以下操作...

// inside the constructor
this.state = {            
        id: props.id,
        name: props.name,
        dataLoaded: false,
        data: null
    }



componentDidMount () {
       // This will only be called once [safe place to start async requests]
       const data = require('../data/'+props.id+'.json');
       // when it had loaded the json, 
       this.setState({data});
}

【讨论】：