如果更新数据,如何更新FlatList

问题描述 投票:1回答:1

我获取数据的方式是在componentWillMount方法中,它在应用程序启动时呈现FlatList时工作正常,但是当我添加数据时,我想要的只是更新我的flatList。我怎么能在这里做的是代码片段:

 componentWillMount() {
    console.log(`componentDidUpdate`, prevProps);
    const user = firebase.auth().currentUser;

    if (user != null) {
      const db = firebase.firestore();
      const docRef = db.collection('userCheckInHistory').doc(user.uid);
      docRef
        .get()
        .then(doc => {
          if (doc.exists) {
            let shopId = this.props.shopId;
            let userShopHistoryData = doc.data();
            let userShopPick = userShopHistoryData[shopId];
              this.setState({
                checkInHistory: userShopPick,
                shopId: this.props.shopId
              });


          } else {
            console.log('No such document!');
            return false;
          }
        })
        .catch(function(error) {
          console.log('Error getting document:', error);
        });
    }
  }

现在这是我的FlatList代码:

renderHistoryList() {
    const sortedData = Common.getArrayByObject(this.state.checkInHistory);
    if (this.state.checkInHistory !== '') {
      return (
        <FlatList
          data={sortedData}
          extraData={this.state}
          keyExtractor={this._keyExtractor}
          renderItem={({ item }) => (
            <MyListItem
              id={item}
              onPressItem={this._onPressItem}
              selected={!!this.state.selected.get(item)}
              title={item}
            />
          )}
        />
      );
    } else {
      return <Spinner />;
    }
  }
react-native google-cloud-firestore react-native-flatlist
1个回答
0
投票

当您从api获取数据时,使用该数据设置您的状态。然后,如果您添加数据和setState,本机将重新呈现应用程序,您将在列表中看到您的数据。

© www.soinside.com 2019 - 2024. All rights reserved.