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 行。

我错过了什么吗？我还需要做另一个步骤吗？

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

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

更新：谢谢，它需要传递数组的克隆并设置一个键（抱歉只能接受一个答案）。但这意味着整个清单正在呈现。最后我设置了一个＆＃39;删除＆＃39;项目的属性，测试该属性更改并在render方法中返回null如果项目被标记为remove，这比重新呈现所有项目更快。

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。

Answer 2

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

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

React native：从ListView中删除项目

2 个答案: