附加到 FlatList 数据的项目出现在列表底部 [重复]答案

【问题标题】：Item prepended to FlatList data appears at bottom of list [duplicate]附加到 FlatList 数据的项目出现在列表底部 [重复]
【发布时间】：2017-08-29 00:51:08
【问题描述】：

我在我的 React Native 应用程序中有这个 FlatList 组件，我正在尝试将一个项目添加到：

<FlatList
  data={this.state.comments}
  keyExtractor={this._keyExtractor}
  extraData={this.state}
  refreshing={this.state.refreshing}
  renderItem={({item, index}) => (
    <CardComment navigate={this.props.navigation.navigate} report={item.reply}/>
  )}
  removeClippedSubviews={false}
/>

我正在尝试更新列表并将新项目放在当前 cmets 的顶部。成功请求后，这就是我在 fetch 上所做的事情：

.then((r) => {
  this.setState({
    refreshing: false,
    loadingComments: false,
    comments: [
      {reply: r},
      ...comments,
    ],
  });
});

即使我将新元素添加到 comments 列表的开头，它在呈现时仍然出现在 FlatList 的底部。为什么，我该如何解决？

【问题讨论】：

正如提问者最终意识到的那样，这实际上与stackoverflow.com/q/45199769/1709587 中的问题相同——在渲染项目数组时需要提供key 属性。请注意，鉴于上面 <CardComment ...> 上缺少 key，此代码应该会引发警告说 VirtualizedList：缺少项目的键，请确保在每个项目上指定一个键属性或提供一个 cu.. ..那是你错过的线索！

标签： javascript android ios reactjs react-native

【解决方案1】：

所以我找到了一些解决方法，而我似乎无法找到我的问题的答案。我保存了我之前的 cmets 数组，setState 来清理数组，这样我就可以清理整个 FlatList 组件。然后，在第一个 setState 的回调中，我将新元素附加到第一个数组的开头。

    comments = this.state.comments;
    this.setState({comments:[]}, function(){
      this.setState({
        comments: [
          {reply: r},
          ...comments,
        ],
        loadingComments: false,
      });
    });

不过，如果有人有更好的解决方案或知道我的问题的解决方案，请告诉我。 :)

更新：这实际上解决了我的问题：React Component's state renders strangely with .unshift(), but normal with .push()

【讨论】：

【解决方案2】：

你可以这样做：

const comments = this.state.comments.slice();
comments.unshift({ reply: 'Reply Q' });
this.setState({ comments: comments});

这将触发刷新。

下面显示了这如何解决您的问题...https://snack.expo.io/BkAi7StY-

【讨论】：

嘿，谢谢，但这不起作用:(顺便说一句，正如反应文档中所述，您不应该直接修改状态。相反，您应该使用 setState。
啊，好吧，我重新阅读了您的问题，并意识到您也在询问实际的刷新过程。更新答案 - 久经考验:)
顺便说一句，我没有直接修改状态...我使用了 setState...
我来解释一下我的意思：如果您将第一行误解为设置状态，则称为变量的解构，等效于 const cmets=this.state.cmets。您看到我的回答如何解决您的问题了吗？如果不是，我很乐意与您分享一个工作示例。
嗨！谢谢你的时间。我真的很感激。我最终不再使用 setState 了，因为我改成了 redux，现在它可以工作了。但是，我仍然需要清理数组，并使用新的“回复”发送一个新数组，以查看 FlatList 上的更改。