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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如果更新数据,如何更新FlatList相关的知识,希望对你有一定的参考价值。

我获取数据的方式是在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 />;
    }
  }
答案

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

以上是关于如果更新数据,如何更新FlatList的主要内容,如果未能解决你的问题,请参考以下文章

React 本机 Flatlist 项目未更新

为啥 FlatList 在 React Native 中没有动态更新

如何更新片段简历上的数据

FlatList ref scrollToIndex 不是函数

VirtualizedList:您有一个更新缓慢的大列表 - React Native FlatList

如何反应原生重新渲染 Flatlist?