react-native - react native : remove item from ListView

Question

我在 Android 上使用 React Native ( 0.12.0 ) 并在我的页面上有一个 ListView 组件。我希望能够从列表中删除项目。

这个 ListView 看起来像这样:

<ListView
    dataSource={this.state.dataSource}
    renderRow={this._renderStory}
    onEndReached={this._getStories}
    />

rowHasChanged方法看起来像这样。

this.state = {
    dataSource: new ListView.DataSource({
        rowHasChanged: (row1, row2) => {
            return row1 !== row2;
        },
    }),
    loaded: false,
};

所有这些都很好。

现在，要删除一个项目，我有这个代码:

var indexOfItem = this._data.findIndex((item) => item.id === story.id);
this._data.splice(indexOfItem, 1);

this.setState({
    dataSource: this.state.dataSource.cloneWithRows(this._data),
});

我可以确认该项目正在从 this._data 中删除. this.state.dataSource._cachedRowCount应该减少一。正在更新状态并触发渲染周期。但该项目不会从页面中删除。更重要的是，如果我将控制台日志放入 this._renderStory() ，唯一发生的事情是它在列表底部呈现一个新行。

我错过了什么吗？我还需要做其他步骤吗？

一个类似的问题在这里被问到，但他从来没有得到关于删除一行的答案。 How to add/Delete item into ListView?

我在这个地方看到的所有其他示例都缺少删除项目的示例。

更新:谢谢，它需要传递数组的克隆并设置一个键(抱歉只能接受一个答案)。但这意味着正在呈现整个列表。最后，我只是在项目上设置了一个 'removed' 属性，测试了该属性的变化，如果一个项目被标记为删除，则在渲染方法中返回 null，这比重新渲染所有项目要快。

Answer 1

<ListView
  key={this._data}
  dataSource={this.state.dataSource}
  renderRow={this._renderStory}
  onEndReached={this._getStories}
/>

使用 this._data 设置 ListView 的键.如果你有一个 Key/ID 行数组，像 key={this._data.IDArray} 一样使用它.

见 ListView removing wrong row on dataSource update更多细节。