如何在FlatList组件中加载完成状态?

问题描述

我在我的本机应用程序中记录了状态.

I have record state in my react native app.

state{
    record:[],
    //initially empty, then i setState in displaydata(), then state looks like this in console
}

控制台输出我的记录状态:

Console output of my record state:

Array [
  Object {
    "name": "abc",
    "age": 23,
    },
]
Array[
 Object {
    "name": "xyz",
    "age": 27,
    },
]

下面是displaydata函数，当通过FlatList对其进行渲染时，它仅显示名称为abc且年龄为23的数组的第一项.同时，它还应加载状态为xyz且年龄为27的第二个数组项.状态输出代码.

Below is displaydata function and when render it through FlatList it shows only first item of array that is name abc and age 23. While it should also load 2nd array item in state, which is name xyz and age 27. below is the code for output of state.

displaydata(){
        firebase.firestore()
            .collection('users').where('age', '>=', 21)
            .get()
            .then(querySnapshot => {

                querySnapshot.forEach(documentSnapshot => {
                    const urecords = [];
                    const udata = documentSnapshot.data();
                    urecords.push(udata);

                    this.setState({ record: [...urecords] })

                });
            });
    }
}
render(){
    return(
    <View style={{ flex: 1 }}>
    {this.state.record ? (
    <>
    <Text>Data from firebase firestore</Text>
          <FlatList
                 style={{ flex: 1 }}
                 data={this.state.record}
                 keyExtractor={(key, index) => key + index}
                 renderItem={(itemData) => {

                     console.log(this.state.record); // it displays all data of state in console as i have consoled above
                     return <Text>{itemData.item.name}{itemData.item.age}</Text>; // it displays first array data(item) only, which is abc and 23

                  }
               }
          />
    </>
       ) : (
      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
         <ActivityIndicator size="large" color="black" />
      </View>
     )}
    </View>
    );

 }

我想像在控制台中一样在屏幕上加载完整状态.TIA

I want to load complete state on my screen as i have in my console. TIA

推荐答案

您在此处覆盖状态:

this.setState({record:[... urecords]})

请执行以下操作:

this.setState({record:[... this.state.record，... urecords]})

首先，我们复制之前的条目，然后添加新的条目.

First we copy the previous entries, then we add the new ones.

这篇关于如何在FlatList组件中加载完成状态?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！