Question

我正在从事reactjs项目

我从firestore中获取数据并将app.js状态设置为获取的数据，然后将此状态传递给app.js的子项以显示它，但首先它是未定义的，然后它控制了正确的状态。

>

如何使子组件的道具正确后才渲染？！

  fetchDataFromFirestore = async () => {
    let dataRefFromFirestore = database.doc('items/fruitsDataJsonFile');
    (await dataRefFromFirestore).onSnapshot((snapshot) => {
      let fetchedItems = snapshot.data();
      this.setState({
        fetchedItems: fetchedItems.data
      },
        console.log('DONEEE ADIING'))
    })
  }

Answer 1

您可以使用称为“ 条件渲染”的概念。

就像

    {!!this.state.fetchedItems?.length && 
<YourChildComponent fetchedItems={this.state.fetchedItems}>

然后，仅当状态具有数组数据时，才会呈现您的子组件。

类似地，您的子组件将具有称为fetchedItems的道具以及完整数据。

参考：https://reactjs.org/docs/conditional-rendering.html

setState（）之后无法将反应状态传递给孩子？

1 个答案: