FlatList 中的 ExtraData 在更改时不会更新列表答案

【问题标题】：ExtraData in FlatList wont't update list when changedFlatList 中的 ExtraData 在更改时不会更新列表
【发布时间】：2020-11-09 14:32:42
【问题描述】：

我知道 extraData 用于在 flatlist 更改时更新它，但不知何故它在我的情况下不起作用。我知道我做错了什么，但我需要建议来解决这个问题。这是我的平面列表：

<FlatList
      data={this.state.data}
      extraData={this.state.data}
      renderItem={this.renderPost}
      keyExtractor={(item, index) => index.toString()}
      onEndReached={this.loadMorePosts}
      onEndReachedThreshold={0.5}
      ListFooterComponent={this.renderFooter}
      showsVerticalScrollIndicator={false}
      refreshControl={
        <RefreshControl
          refreshing={this.state.loading}
          onRefresh={this.loadNewerPosts}
        />
      }
    />

这是我的 deleteRequest，应该从 this.state.data 中删除一项：

deletePost = (index) => {
console.log(this.state.data.length);
let data = this.state.data;
data.splice(index, 1);
this.setState({ data: data }, () => {
  console.log(this.state.data.length);
});

};

我什至尝试将刷新设置为状态，并在每次删除项目并将其设置为 extraData 时更改它，但没有任何反应。我究竟做错了什么？ This.state.data.length 正在发生变化，因此数据会发生变化，但 flatList 不会重新渲染。

【问题讨论】：

如果满足您的需求，您可以尝试实现“拉动刷新”功能。

标签： javascript react-native react-native-flatlist

【解决方案1】：

做类似的事情

deletePost = (index) => {
  ....
  let data = [...this.state.data]; // here is a logic
  data.splice(index, 1);
  this.setState({ data: data }, () => {
    console.log(this.state.data.length);
  });
}

【讨论】：

【解决方案2】：

如果您想使用“拉到刷新”功能，请尝试以下操作：

  refreshFlatlist = () => {
    this.setState(
      {
        refresh: true,
      },
      () => this.getDataHandler()    // whatever updates your dataArray displayed in the list
    );
    this.setState({
      refresh: false,
    });
  };

现在平面列表 RefreshComponent 看起来像这样：

   <FlatList
            refreshControl={
              <RefreshControl
                refreshing={this.state.refresh}
                onRefresh={this.refreshFlatlist}
              />
            }
            extraData={this.state.refresh}
            data={this.state.data}
            keyExtractor={(item, index) => item.id.toString()}
            renderItem={({ item }) => ( ...

【讨论】：

【解决方案3】：

不要使用拼接。在 sn-p 下尝试它按预期工作。

deletePost = index => {
   const newData = this.state.data.filter((item, i) => i !== index);
   this.setState({
     data: newData,
   });
};

render(){
  return (
      <FlatList
        data={this.state.data}
        extraData={this.state.data}
        renderItem={this.renderItem}
      />
    );
}

【讨论】：

【解决方案4】：

 deletePost = (index) => {
let data = this.state.data;
data.splice(index, 1);
this.setState({ data: [] }, () => {
  this.setState({ data: data });
});

};

谢谢大家。通过您的解决方案，我提出了这个想法，并且效果很好。

【讨论】：