Question

我正在学习React，在答案之一中，我看到从数组中删除项目时正在使用splice方法。链接到解决方案： Delete item from state array in react

要从数组中删除元素，只需执行以下操作：

array.splice（index，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});
  }
},

预期：与许多其他博客一样，我们已使用filter方法从列表中删除项目。为什么答案越来越高，我们这里不使用过滤器方法？

Answer 1

在上面的示例中，它使用了扩展运算符-

如果要使用过滤器方法，可以选择任何一种方式

什么时候过滤方法会更好？

如果您不希望仅基于一个条件来删除重复元素，如果有这种情况，很显然，您希望过滤所有

如果您不确定为什么将其标记为已接受？

答案很清楚，这取决于问这个问题的人是否适合使用新功能

Answer 2

没有规则，例如为此使用该方法以及为此使用该方法。但是，要确保React知道状态变化，有两个条件需要满足。

使用setState更新状态
状态对象中的顶级键需要设置新的值或引用。即浅表比较似乎有所不同。

您链接的已接受答案同时满足这两个要求。关键是，

var array = [...this.state.people]    // make a separate copy of the array

请注意评论。原始海报清楚地表明，他正在使用spread syntax创建对该数组的新引用。他稍后执行的拼接操作位于此新数组上，无论稍后执行什么操作都没有关系，当将新数组设置为状态的一部分时，React至少调用一次render方法。

为什么要过滤？

Filter通过谓词过滤数组，并返回带有结果的新数组对象。在某些情况下，这可能更灵活，更方便使用，但行为却完全不同。拼接允许通过索引精确删除连续的元素块，而filter则删除所有与谓词不匹配的元素。

根据最适合用例的情况决定使用哪种决定。只要满足上述条件，React就会重新渲染。

注意：在出现的情况下，filter将是最佳选择，因为它只循环遍历数组一次。拼接操作需要在其之前进行扩展和indexOf，这会导致在数组上进行多个枚举。

在React中使用splice更新状态

2 个答案: