React Native：从ListView中删除项目

Question

我正在使用 React Native (0.12.0) 在 Android 上，我的页面上有一个 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()中放置一个控制台日志，唯一发生的事情就是它在列表底部呈现了一个新行。

我错过了什么吗？我需要执行另一步操作吗？

类似的问题在这里被问到，但他从未得到有关删除行的答案。如何将项目添加/删除到ListView中？ 我在其他地方看到的所有示例都缺乏删除项目的示例。

更新：谢谢，它需要传递数组的克隆版本并设置一个键（抱歉只能接受一个答案）。但这意味着整个列表都被渲染了。最终，我只是在项目上设置了一个“removed”属性，测试该属性是否改变，并在呈现方法中返回null，如果一个项目被标记为remove，则比重新呈现所有项目更快。

- David Gilbertson

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在数据源更新时删除错误行。

- KChen

Answer 2

为了更新列表，您需要向其传递数组的副本，而不是相同的数组。因此，在您的情况下，应该像这样做：

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

- eyal83

---

但是在这种情况下，row1 === row2 始终为false，这个执行效率好吗？或者我需要更改 rowHasChanged 函数仅测试我想要触发重新渲染的特定属性（这是我目前所做的，希望有更好的方式）。 - David Gilbertson