如何在React中从状态数组中删除项

　　在本文中，我们将学习如何轻松地从React中的状态数组中删除项。

　　数组筛选器() 方法

　　要在 React 中从状态数组中删除项，请在数组上调用 filter() 方法，指定数组中除要删除的项之外的每个项都将通过的测试，然后使用 的结果 with 更新状态。

　　我们通过从回调返回一个条件来删除带有 的 fruit 对象，该条件仅适用于数组中没有 2 的项。这样做会从从 返回的数组中排除目标项。

　　由于这里是一个函数式组件，我们使用 React 钩子来创建初始状态数组。第一个值返回允许我们访问状态数据。第二个值是用于更新状态的函数(通常称为 )。我们将一个函数传递给(此处命名)以确保获得当前/最新状态。

　　提示： 当根据当前状态数据计算新状态时，始终将函数传递给。setState

　　不要直接在 React 中修改状态

　　请注意，尝试通过使用如下函数直接修改项来从数组中删除该项将不起作用：

　　状态在 React 中是不可变的，因此我们无法通过改变数组来更新数组。它必须替换为从 返回的新数组，以便更新视图。filter()

　　基于多个条件从状态数组中删除项

　　如果需要根据多个条件从状态数组中删除某个项，可以使用逻辑 AND (&&) 或逻辑 OR (&&) 运算符。

　　使用逻辑 OR (||)算子

　　下面是使用逻辑 OR () 运算符从状态数组中删除项的示例。

　　将一组操作数与运算符组合在一起，如果至少有一个操作数的计算结果为 。通过将这个运算符与该方法一起使用，我们返回一个新数组，该数组仅包含等于 或 的水果对象。||truetruefilter()name'Orange''Apple'

　　使用逻辑和 (&&) 运算符

　　下面是使用逻辑 AND () 运算符从状态数组中删除项的示例：

　　仅当所有操作数都为 时，操作数与运算符组合才产生 。&&truetrue

　　通过将该方法与运算符相结合，我们能够指定一个复合布尔表达式，该表达式删除带有 和 的水果对象。filter()&&id24

　　使用德摩根定律简化复合布尔表达式

　　我们可以使用德摩根定律之一将前面的例子中的 AND 条件转换为 OR 条件，并减少否定的次数。

　　这种转换可以使表达式更易于阅读和理解。