Question

我使用

从firebase中提取数据

 componentWillMount(){//predi komponenta da se poqvi v DOM-a
      this.database.on('value', snap => {
        let snapData = snap.val();
        let allData = Object.keys(snapData).map(key => {
            return snapData[key];
        })
        let resultsData = Object.keys(snapData).map(key => {
            return snapData[key].result;
        })

        console.log(resultsData); // logs ["", 4, 1, 1, 2, "", 2, 0, 3, 1, 0, 3, 2, ""]

        this.setState({users:allData , results:resultsData},()=>console.log(this.state.results));
      });
}

稍后，我通过this.state.results

将props传递给组件

<OmegaData results={this.state.results}/>

问题是OmegaData渲染到早期并且this.state.results形成太晚了......在这种情况下，results组件的OmegaData道具是[]。 ..所以我的问题是我需要使用哪些组件生命周期方法以及如何解决这种问题？

Answer 1

这不是一个问题。当您使用正确的道具重新渲染父组件setState中的OmegaData时。如果OmegaData在没有真实数据的情况下无法正确呈现，那么您可以执行以下两项操作之一：

// 1. Render null or a spinner until the data is ready
render() {
  const results = this.state.results;
  if (results.length > 0) {
    return <OmegaData results={results} />;
  } else {
    return null; // or a spinner, or whatever makes sense
  }
}

或

// 2. Teach OmegaData to render correctly
class OmegaData extends React.Component {
  render() {
    return this.props.results.map(result => {
      return <div>This is a result: {result}</div>;
    });
  }
}

OmegaData.defaultProps = {
  results: []
};

在更新父级状态并作为道具传递之后更新道具

1 个答案: