React useState数组新增和删除项

从0开始学react系列

React中,我们可以使用useState钩子来管理组件的状态,其中包括数组。如何在React函数组件中对数组进行增加和删除项的操作?
新增项时:我们可以对原数组进行解构,并把新增项一起加入到新数组;
删除项时:我们使用 Array.filter() 进行筛选删除指定项,以下是一个简单的例子。

// App.jsx
import React, { useState } from 'react'const App = () => {const [items, setItems] = useState([])// 添加新项到数组const addItem = (item) => {setItems([...items, item])}// 删除指定索引的项const removeItem = (index) => {setItems(items.filter((x, i) => i !== index))}return (<div><button onClick={() => addItem('员工')}>新增</button><ul>{items.map((item, index) => (<li key={index}>{item}<button onClick={() => removeItem(index)}>删除</button></li>))}</ul></div>)
}export default App

在这个例子中,App是一个React函数组件,它使用useState钩子来维护一个名为 items 的状态变量,其初始值为空数组。addItem函数用于向数组添加新项,而removeItem函数则用于删除指定索引的项。这两个函数都会导致组件重新渲染,显示更新后的数组状态。

封面图

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/840488.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

LeetCode 264 —— 丑数 II

阅读目录 1. 题目2. 解题思路3. 代码实现 1. 题目 2. 解题思路 第一个丑数是 1 1 1&#xff0c;由于丑数的质因子只包含 2 、 3 、 5 2、3、5 2、3、5&#xff0c;所以后面的丑数肯定是前面的丑数分别乘以 2 、 3 、 5 2、3、5 2、3、5 后得到的数字。 这样&#xff0c;我…

电脑同时配置两个版本mysql数据库常见问题

1.配置时&#xff0c;要把bin中的mysql.exe和mysqld.exe 改个名字&#xff0c;不然两个版本会重复&#xff0c;当然&#xff0c;在初始化数据库的时候&#xff0c;如果时57版本的&#xff0c;就用mysql57(已经改名的)和mysqld57 代替 mysql 和 mysqld 例如 mysql -u root -p …

LLM 大模型学习必知必会系列(十):基于AgentFabric实现交互式智能体应用,Agent实战

LLM 大模型学习必知必会系列(十)&#xff1a;基于AgentFabric实现交互式智能体应用,Agent实战 0.前言 **Modelscope **是一个交互式智能体应用基于ModelScope-Agent&#xff0c;用于方便地创建针对各种现实应用量身定制智能体&#xff0c;目前已经在生产级别落地。AgentFabri…

01.msf

文章目录 永恒之蓝下载msfconsolemsfvenom 永恒之蓝 下载 msdn.itellyou.cn msfconsole M e t a s p l o i t C y b e r M i s s i l e C o m m a n d Metasploit Cyber Missile Command MetasploitCyberMissileCommand 的简称 search ms17_010 use 0 或者 use exploit/wind…

Java入门基础教程-Java基础语法

Java是一种广泛使用的编程语言&#xff0c;其语法简洁明了&#xff0c;易于学习和掌握。本文帮助大家快速了解Java编程的基本概念和语法规则。 一、Java程序结构 Java程序由类&#xff08;Class&#xff09;组成&#xff0c;每个类可以包含变量&#xff08;Variable&#xff…

telnet网络疏通——脚本案例

这段脚本主要是使用 bash 脚本进行 Telnet 连接测试&#xff0c;遍历了三个 IP 地址&#xff08;192.168.20.11、192.168.20.22、192.168.20.33&#xff09;以及三个端口号&#xff08;22、80、443&#xff09;。对每个 IP 地址和端口组合进行 Telnet 连接测试&#xff0c;如果…

从零开始:手把手教你使用Python实现PDF到Excel的转换

来百 在日常工作和学习中&#xff0c;我们经常会遇到需要将PDF文件中的数据提取到Excel表格中的情况。可能是为了进行数据分析、报告生成或者其他目的。虽然手动复制粘贴是一种方法&#xff0c;但对于大量的数据来说&#xff0c;这种方式显然效率太低。幸运的是&#xff0c;Py…

【相机开发问题总结】曝光补偿ExposureCompensation未生效异常分析及解决

问题描述 做一款相机应用时&#xff0c;用户反馈相机预览界面太暗了&#xff0c;由于我们是嵌入式设备&#xff0c;没有手机那么高大上得闪光灯补光&#xff0c;因此只能考虑从软件层面提高界面亮度&#xff0c;还好找到了曝光补偿&#xff0c;但是开发过程中发现曝光补偿未生…

npm 错误,ERESOLVE unable to resolve dependency tree

npm 错误,ERESOLVE unable to resolve dependency tree 在命令中增加 --legacy-peer-dep 选项或者–force npm install --legacy-peer-depsnpm install --force

保存商品信息功能(VO)

文章目录 1.分析前端保存商品发布信息的json数据1.分析commoditylaunch.vue的submitSkus1.将后面的都注销&#xff0c;只保留查看数据的部分2.填写基本信息3.保存信息&#xff0c;得到json4.使用工具格式化一下 2.使用工具将json转为model3.根据业务修改vo&#xff0c;放到vo包…

「网络流浅谈」最大流的应用

更好的阅读体验 二分图匹配 考虑如何将二分图匹配问题&#xff0c;转化为流网络。设置 1 1 1 个汇点和源点&#xff0c;从源点向二分图一侧的每一个点连边&#xff0c;从另一侧向汇点连边&#xff0c;边权均为 1 1 1&#xff0c;二分图中的边也全部加入&#xff0c;权值设为…

【第1章】SpringBoot入门

文章目录 前言一、版本要求1. SpringBoot版本2. 其他2.1 System Requirements2.2 Servlet Containers2.3 GraalVM Native Images 3. 版本定型 二、新建工程1.IDEA创建 ( 推荐 ) \color{#00FF00}{(推荐)} (推荐)2. 官方创建 三、第一个SpringBoot程序1. 引入web2. 启动类3. 启动…

Edge浏览器:重新定义现代网页浏览

引言 - Edge的起源与重生 Edge浏览器&#xff0c;作为Microsoft Windows标志性的互联网窗口&#xff0c;源起于1995年的Internet Explorer。在网络发展的浪潮中&#xff0c;IE曾是无可争议的霸主&#xff0c;但随着技术革新与用户需求的演变&#xff0c;它面临的竞争日益激烈。…

python中的一些基础概念

在python中整型数据可以和浮点型数据相加&#xff0c;在python中字符串数据可以进行相加&#xff0c; 在python中整型数据可以和布尔类型进行算术运算。此时True当做1&#xff0c;False当做0但是这样的操作是没有意义的&#xff0c; python中只有字符串类型没有字符类型&…

用这8种方法在海外媒体推广发稿平台上获得突破-华媒舍

在今天的数字时代&#xff0c;海外媒体推广发稿平台已经成为了许多机构和个人宣传和推广的有效途径。如何在这些平台上获得突破并吸引更多的关注是一个关键问题。本文将介绍8种方法&#xff0c;帮助您在海外媒体推广发稿平台上实现突破。 1. 确定目标受众 在开始使用海外媒体推…

篮球论坛|基于SprinBoot+vue的篮球论坛系统(源码+数据库+文档)

篮球论坛系统 目录 基于SprinBootvue的篮球论坛系统 一、前言 二、系统设计 三、系统功能设计 1系统功能模块 2管理员功能模块 3用户功能模块 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取&#xff1a; 博主介绍&#xff…

AI大模型探索之路-实战篇5: Open Interpreter开放代码解释器调研实践

系列篇章&#x1f4a5; AI大模型探索之路-实战篇4&#xff1a;DB-GPT数据应用开发框架调研实践 目录 系列篇章&#x1f4a5;前言一、何为Open Interpreter&#xff1f;二、与 ChatGPT 的代码解释器比较三、 Open Interpreter的特性1、强大的本地计算能力2、丰富的功能3、高度的…

Go 实现程序优雅退出

在Go语言中&#xff0c;实现程序的优雅退出是一项重要的任务&#xff0c;特别是在涉及到HTTP服务器、gRPC服务器、以及其他后台工作的情况下。 在实际应用中&#xff0c;通常建议同时监听 os.Interrupt 和 syscall.SIGTERM&#xff0c;因为它们都是常见的终止信号&#xff0c…

Spark在YARN上运行图解(资源调度+任务调度)及案例

前提&#xff1a;已经安装了spark集群&#xff0c;可参考上篇文章搭建&#xff1a;http://t.csdnimg.cn/UXBOp 一、Spark集群配置YARN 1、增加hadoop 配置文件地址 vim spark-env.sh 增加export HADOOP_CONF_DIR/usr/local/soft/hadoop-3.1.1/etc/hadoop 2、关闭虚拟内存 cd …