使用剪接更新React中的状态
使用剪接更新React中的状态
提问于 2019-06-22 04:42:24
我正在学习React，在其中一个答案中，我看到了在从数组中删除项时使用的剪接方法。链接到解决方案：从react状态数组中删除项
要从数组中删除元素，只需执行以下操作：
Array.splice(索引，1)；在您的例子中：
removePeople(e) {
var array = [...this.state.people]; // make a separate copy of the array
var index = array.indexOf(e.target.value)
if (index !== -1) {
array.splice(index, 1);
this.setState({people: array});
}
},期望:与许多其他博客一样，我们使用筛选方法从列表中删除项目。为什么答案是被提高，而我们这里没有使用过滤方法？
回答 1
Stack Overflow用户
发布于 2019-06-22 06:03:10
没有这样的规则，比如为此使用此方法，以及为此使用该方法。然而，要确保React知道状态的变化，需要满足两个条件。
- 使用
setState更新状态 - 状态对象中的顶级键需要使用新的值或引用来设置。也就是说，在肤浅的比较中显得不同。
您所链接的已接受的答案满足了这两项要求。关键是，
var array = [...this.state.people] // make a separate copy of the array注意注释。原始海报清楚地表明，他正在使用扩展语法创建一个对数组的新引用。他稍后执行的拼接操作是在这个新数组上执行的，不管他以后执行什么操作，在将新数组设置为状态的一部分时，React将至少调用一次呈现方法。
为什么要过滤？
过滤器通过谓词对数组进行筛选，并返回一个新的数组对象和结果。在某些情况下，这可能更灵活和方便使用，但它有完全不同的行为。Splice允许通过索引精确地删除元素的连续块，而filter则删除与谓词不匹配的所有元素。
使用的决定取决于什么是最适合用例的。只要满足上述条件，React就会重新渲染.
注意:在出现的情况下，过滤器将是性能的选择，因为它只在数组上循环一次。连接操作需要在它之前执行、扩展和indexOf操作，这将导致数组上的多个枚举。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56712647
复制相关文章
相似问题
腾讯云开发者
