Reactjs - 在构造函数中加载 json 文件

Question

这是下面的代码

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

装载组件时数据是否可用？还是异步或同步？

这是加载数据的正确方法吗？或者有更好的解决方案吗？

Answer 1

有两种方式对我来说是可见的。一个是如果你只使用"require"来导入数据(也许是静态的(：我建议你签出 Webpack ...和这篇文章。但是，如果您的目标是加载数据(可能是动态的(，建议通过覆盖 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});
}