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

时间:2016-09-14 18:31:03

标签: reactjs

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

console

(忽略图像中的两个错误,它们是无关的。)

1 个答案:

答案 0 :(得分:4)

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

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