React native：从 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() 中输入一个控制台日志，唯一发生的事情就是它在列表底部呈现一个 new 行。

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

这里问了一个类似的问题，但他从未得到关于删除行的答案。

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

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

Answer 1

为了更新列表，您需要向其传递数组的副本，而不是同一个数组。所以在你的情况下，是这样的：

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

Answer 2

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

设置ListView的key为this._data。如果您有一个 Key/ID 行数组，请像 key={this._data.IDArray}.

一样使用它

有关详细信息，请参阅 ListView removing wrong row on dataSource update。

React native：从 ListView 中删除项目

React native: remove item from ListView

react-native