Question

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

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

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

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

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

然后我尝试了以下内容：

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)
});

这可能不是最佳解决方案。

Answer 2

当涉及空数据时，如fetch没有找到数据结果，我像这样用来刷新ListView：

＆＃13;

this.setState({ dataSource: 
                    this.state.dataSource.cloneWithRows({}),
                loaded: true,
                    });

＆＃13;

React Native listView项目删除不正确删除项目

2 个答案: