如何从状态数组中删除项？

6 浏览
0 Comments

如何从状态数组中删除项？

故事是，我应该能够把Bob、Sally和Jack放进一个盒子里。我也可以将其中任何一个人从盒子里拿出来。当被移除时，不会留下任何空位。\n现在我需要移除，比如说\"Bob\"。新的数组将是：\n[\"Sally\", \"Jack\"]\n这是我的React组件：\n...\ngetInitialState: function() {\n return{\n people: [],\n }\n},\nselectPeople(e){\n this.setState({people: this.state.people.concat([e.target.value])})\n},\nremovePeople(e){\n var array = this.state.people;\n var index = array.indexOf(e.target.value); // 假设是Bob。\n delete array[index];\n},\n...\n这里我给你展示了一个最简代码，因为还有更多内容（例如onClick等）。关键部分是从数组中删除、移除、销毁\"Bob\"，但是当调用removePeople()时它不起作用。有任何想法吗？我在这里参考了这个，但是可能是因为我在使用React时做错了什么。

0

3 答案

0 Comments

在上述代码中，有一个名为"removePeople"的函数，它被用于从"state"数组中删除项目。然而，文章没有提供问题的具体描述。从代码中可以推测出问题的原因是要删除"state"数组中的项目，但没有给出具体的解释。

解决方法是通过使用ES6的箭头函数和filter方法来实现。首先，通过使用filter方法来创建一个名为"filteredArray"的新数组，该数组不包含与"e.target.value"相等的项目。然后，使用setState方法将"filteredArray"设置为新的"people"状态值，从而更新"state"数组。

这就是一个简单的删除"state"数组中项目的解决方法。

0
0 Comments

如何从状态数组中删除一个项？

原因：在使用React时，应该避免直接改变状态。应该创建一个新的数组并使用setState()。

解决方法：

为了从数组中删除一个元素，只需执行以下操作：

array.splice(index, 1);

在你的情况下：

removePeople(e) {
  var array = [...this.state.people]; // 创建一个数组的副本
  var index = array.indexOf(e.target.value)
  if (index !== -1) {
    array.splice(index, 1);
    this.setState({people: array});
  }
}

在我的情况下是：`array.splice(array, 1);` 谢谢

`array.splice(array, 1);`？我猜你需要编辑它...你应该使用不同的变量...

每个答案部分起作用，但当点击另一个人的“删除”按钮时，它会删除错误的人。Aleksandr Petrov的答案效果最好，但它会在数组中留下null值，所以我使用了`array.splice(index, 1);`。向Aleksandr Petrov表示感谢。您的答案有效，让我们对答案做出细微的调整。

如果我有一个与people不同的状态对象，它会被丢弃吗？

我建议在这种情况下使用Array.from(this.state.items)而不是扩展运算符。这是因为Array.from专门用于这种用途。

在这种情况下，'e'是什么？我应该传递什么值来调用removePeople()函数？如果这是一个非常基本的问题，我很抱歉，我只是一个学习者。

小建议，在对数组进行splice操作之前，添加一个对“index !== -1”的检查，以防止意外删除。

这是反模式。splice函数会改变相同的数组。

这可能是React Native最糟糕的事情。

它是React的罪魁祸首。

为什么要复制people列表可能很大？而不是使用数组过滤器返回一个新数组。

0
0 Comments

在使用React时，永远不要直接改变状态。如果改变了一个对象（或者Array，也是一个对象），应该创建一个新的副本。

有人建议使用Array.prototype.splice()，但是该方法会改变数组，所以最好不要在React中使用splice()。

最简单的方法是使用Array.prototype.filter()来创建一个新数组：

removePeople(e) {
    this.setState({people: this.state.people.filter(function(person) { 
        return person !== e.target.value 
    })});
}

这是一种声明式的方式。另一种方法是使用prevState和箭头函数：

this.setState(prevState => ({ people: prevState.people.filter(person => person !== e.target.value) }));

这应该是接受的答案，符合React的习惯，不会改变状态。

或者使用索引：

this.state.people.filter((_, i) => i !== index)

这个答案的问题是，如果有几个人有相同的名字，你会把它们全部删除。使用索引在可能存在重复的情况下更安全。

哦，谢谢。我花了一段时间才找到这个信息...我无法区分splice和slice之间的小差异（一个字符）。我一直在使用slice，但是看到了关于splice的介绍...哎。

你可能正在对集合进行map操作，以便在某个地方显示它们，这需要一个key（应该使用项目的索引）。如果你在map块中渲染删除操作/元素，应该将索引传递给删除元素的函数。如果有很多项，通过索引删除一个项更合理，而不是遍历所有项进行过滤。根据过滤条件，你还可能删除多个元素，这可能不是你的意图。无论你做什么，确保不要进行改变。这个答案可能是错误的吗？状态更新可能是异步的。

0