javascript - React Native listView 项目删除未正确删除项目

Question

运行一些示例代码时，我遇到了一个问题，即 listView 没有正确地重新呈现已修改的列表。例如，我有一个硬编码的对象数组，例如:

datasetsItems = [
    {firstObjectWithMultipleParams},
    {secondObjectWithMultipleParams},
    ...
]

然后我创建了一个执行以下操作的按钮:

datasetsItems.splice(1,1) // To delete the object at index 1
this.setState({dataSource: this.state.dataSource.cloneWithRows(
    datasetsItems
)});

但是，这会在删除数组中的最后一个对象而不是在索引处指定的对象的情况下呈现它。我检查了调试器，拼接功能正常工作并删除了请求的对象，因此这不是拼接功能的问题。

然后我尝试了以下操作:

datasetsItems = [...datasetsItems.slice(0,1),...datasetsItems.slice(2,datasetsItems.length)];
this.setState({dataSource: this.state.dataSource.cloneWithRows(
    datasetsItems
)});

这可以正常工作并按预期呈现列表，而没有索引 1 处的对象。所以我做了以下操作，只是为了测试:

datasetsItems.splice(1,1);
let newDs = datasetsItems.slice();
this.setState({dataSource: this.state.dataSource.cloneWithRows(
    newDs
)});

但这行不通，并且与第一个示例一样失败。

这种行为有原因吗？我还想知道我使用切片的方式是否摆脱了 React 仅修改更改的行并因此完全重新呈现所有内容的能力？

Answer 1

您应该使用原始数据集的克隆来更新状态。我遇到了同样的问题，并在执行此操作之前通过深度复制数组设法修复了它:

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

这是我的一段代码:

//delete some items from old_array

var new_array = JSON.parse(JSON.stringify(old_array));

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

这可能不是最好的解决方案。