React native:从ListView中删除项目

Question

我0.12.0在Android上使用React Native()并在我的页面上有一个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'属性,测试了该属性的变化,如果一个项目被标记为remove,则在render方法中返回null,这比重新渲染所有项目更快.

Answer 1

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

设置ListView的键this._data.如果您有一个Key/ID数组的行,请使用它key={this._data.IDArray}.

有关详细信息,请参阅ListView删除dataSource更新中的错误行.