全国旗舰校区

不同学习城市 同样授课品质

北京

深圳

上海

广州

郑州

大连

武汉

成都

西安

杭州

青岛

重庆

长沙

哈尔滨

南京

太原

沈阳

合肥

贵阳

济南

下一个校区
就在你家门口
+
当前位置:首页  >  技术干货

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

发布时间:2022-10-08 16:10:00
发布人:syq

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

  数组筛选器() 方法

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

10

11

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

12

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

13

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

  不要直接在 React 中修改状态

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

14

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

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

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

  使用逻辑 OR (||)算子

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

15

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

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

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

16

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

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

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

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

17

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

相关文章

flutter和uni-app在应用层面有什么区别?

flutter和uni-app在应用层面有什么区别?

2023-10-14
Flutter和 qt的区别都有什么?

Flutter和 qt的区别都有什么?

2023-10-14
rnn和lstm中batchsize和timestep的区别是什么?

rnn和lstm中batchsize和timestep的区别是什么?

2023-10-14
什么是OA服务器?

什么是OA服务器?

2023-10-14

最新文章

常见网络安全面试题:Windows常用的命令有哪些?

常见网络安全面试题:Windows常用的命令有哪些?

2023-10-09
常见网络安全面试题:根据设备告警如何展开排查?

常见网络安全面试题:根据设备告警如何展开排查?

2023-10-09
常见网络安全面试题:mysql加固呢?(数据库加固)

常见网络安全面试题:mysql加固呢?(数据库加固)

2023-10-09
常见网络安全面试题:windows和linux加固?(操作系统加固)

常见网络安全面试题:windows和linux加固?(操作系统加固)

2023-10-09
在线咨询 免费试学 教程领取