當使用extraData時，React Native FlatList會渲染兩次數據

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 });
    });

我這樣做是因為我希望將其訂購（來源： https : //stackoverflow.com/a/33897213/5075510 ）

我的FlatList看起來像這樣：

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

我認為這可能與我檢索數據的方式有關。 當我在沒有forEach的情況下執行此操作時，一切正常，但不會呈現有序狀態。 預先感謝您的幫助！

Answer 1

您需要先清除thisArr然后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 });
});