React：在初始渲染时加载道具

Question

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 (
      ...
    )
  }
}

（忽略图像中的两个错误，它们是无关的。）

Answer 1

在您的数据出现之前，您只需返回其他内容，或null。尝试将if(this.state.stagesData.length === 0) return null添加到渲染函数的第一行。这样它就不会显示，直到数据实际存在。

编辑：要回答您的问题，第一次渲染时数据不能存在。更好的方法是返回包含除数据之外的所有内容的HTML，或者如上所述简单地返回null，直到请求完成为止。如果需要，您还可以渲染加载指示器！