React Native FlatList 在使用 extraData 时渲染数据两次

Question

我正在使用带有 firebase 的 React Native（没有 Redux 或类似的东西）。我有一个 FlatList 通过使用 'on' 方法监听 firebase 的变化。 FlatList 会监听变化，但是当呈现新数据时，它也会呈现新数据和旧数据。所以我有旧数据，然后有附加新数据的旧数据。

我这样检索数据：

firebase.database().ref(`/thisThat/${uid}/arguments/this/`).orderByChild('timestamp')
      .on('value', (snapshot) => {
        snapshot.forEach((child) => {
            thisArr.push(child.val());
        });
      this.setState({ thisArguments: thisArr });
    });

我这样做是因为我希望它被订购（来源：）

我的 FlatList 如下所示：

<FlatList
  data={this.state.thisArguments}
  renderItem={this.renderItem}
  keyExtractor={(item, index) => index}
  ListEmptyComponent={this.emptyList}
  extraData={this.state}
 />

我认为这可能与我检索数据的方式有关。当我在没有 forEach 的情况下这样做时，一切正常，但它不会呈现有序。预先感谢您的帮助！

Answer 1

你需要清除 thisArr 才能向其推送新项目

firebase.database().ref(`/thisThat/${uid}/arguments/this/`).orderByChild('timestamp')
.on('value', (snapshot) => 
{
    thisArr = [];   // <----- here is the fix
    snapshot.forEach((child) => 
    {
        thisArr.push(child.val());
    });

    this.setState({ thisArguments: thisArr });
});

React Native FlatList 在使用 extraData 时渲染数据两次

React Native FlatList renders data twice when using extraData

javascript

reactjs

react-native

firebase-realtime-database

react-native-flatlist