react 中的 useState 钩子效果很好,可以用来操作各种数据类型的变量。

然而,最难操作的可能是数组类型。在 javascript 中推送、删除和编辑数组相当简单,但使用 useState 会变得有点复杂,特别是如果您遵循 react 的最佳状态实践。

让我们看看我们如何执行这些最佳实践来添加、删除和编辑作为状态的数组。

推

这一个很简单,大多数开发人员都正确地做到了。这只是利用先前的状态并在先前的元素之后添加元素的问题,如下所示:

setFruits(prev => [...prev, 'apple'])

进入全屏模式 退出全屏模式

移除

删除是它变得复杂的地方。多年来,我看到许多开发人员使用各种非最佳实践“黑客”来实现这一目标。甚至在 Stack Overflow 上也有一个非常受欢迎且被接受的答案,这也不是 useState 的最佳实践。它建议执行常规 javascript array.splice(),然后使用 setState(prev u003d> [...prev]) 更新状态。不好!

所有这些解决方案都确实有效,但如果你想遵循 react 的最佳实践,那么这里是如何从数组中删除:

解决方案

这个想法是永远不要在反应中改变 setState 中的状态。所以你总是需要使用以前的值。因此,从 react 中的状态数组中删除一个元素应该像这样执行:

let elementToRemove = 'orange'
setFruits(prev => prev.filter(fruit => fruit !== elementToRemove ))

进入全屏模式 退出全屏模式

在一行中,我们可以删除我们想要的元素,而无需使用 javascript 方法或改变我们的状态。

你可以自己测试一下!

结论

从状态数组中删除元素很简单,只需一行即可完成,但需要在不改变状态的情况下小心执行,以遵循最佳反应实践。