this.props.allStagesData
来自父组件中的AJAX请求。如果我注释掉console.log('stageID', currentStage._id);
,那么此组件在我最终获取数据之前会加载3次。当该日志被取消注释时,它会抛出Uncaught TypeError: Cannot read property '_id' of undefined
,因为我还没有数据。
如何在初始渲染时加载此数据?
export default class NavMain extends React.Component {
constructor(props) {
super(props);
this.state = {
stagesData: []
}
}
componentWillMount() {
var stagesData = this.props.allStagesData;
this.setState({
stagesData: stagesData
})
}
render() {
var stagesData = this.state.stagesData,
currentStage = _.find(stagesData, {'_status': "open"});
console.log('this.props.allStagesData', this.props.allStagesData);
console.log('this.state.stagesData', stagesData);
console.log('currentStage', currentStage);
console.log('stageID', currentStage._id);
return (
...
)
}
}
(忽略图像中的两个错误,它们是无关的。)
答案 0 :(得分:4)
在您的数据出现之前,您只需返回其他内容,或null
。尝试将if(this.state.stagesData.length === 0) return null
添加到渲染函数的第一行。这样它就不会显示,直到数据实际存在。
编辑:要回答您的问题,第一次渲染时数据不能存在。更好的方法是返回包含除数据之外的所有内容的HTML,或者如上所述简单地返回null,直到请求完成为止。如果需要,您还可以渲染加载指示器!