React useState数组新增和删除项

news2024/11/19 4:31:28

从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.coloradmin.cn/o/1692269.html

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

相关文章

2024年全国大学生电工数学建模竞赛B题解析 | 数据处理 代码 论文分享

B 题&#xff1a;大学生平衡膳食食谱的优化设计及评价 1 数据预处理2 问题一2.1 问题1.12.1.1 评价体系的构建2.1.2 指标计算2.1.3 指标计算结果2.1.4 基于层次分析法的膳食营养评价模型2.1.5 评价模型的求解 2.2 问题1.22.2.1 食物与成分间拓扑关系的构建2.2.2 微调模型的建立…

IT行业已经饱和?2024年报考计算机类专业还有出路吗?

&#x1f446;点击关注 获取更多编程干货&#x1f446; “高薪”光环加持&#xff0c;IT行业一直是不少人心仪的职业选择&#xff0c;计算机专业一度成为最热门的本科专业。 然而&#xff0c;正因报考计算机专业、想要入行IT行业的人越来越多&#xff0c;“行业饱和”、“人才…

探数API统计分享-2017年-2021年中国各省人均消费支出统计

根据2017年至2021年的统计数据&#xff0c;我国各省&#xff08;市、区&#xff09;的人均消费支出情况各不相同。其中&#xff0c;上海的人均消费支出最高&#xff0c;达到了2021年的48879元&#xff0c;位居全国之首。紧随其后的是北京&#xff0c;人均消费支出为43640元。 …

Vivado 使用教程(个人总结)

Vivado 是 Xilinx 公司推出的一款用于 FPGA 设计的集成开发环境 (IDE)&#xff0c;提供了从设计输入到实现、验证、调试和下载的完整流程。本文将详细介绍 Vivado 的使用方法&#xff0c;包括项目创建、设计输入、约束文件、综合与实现、仿真、调试、下载配置等步骤。 一、创建…

如何生成Github Badge徽章图标

如何生成徽章Badge 什么是徽章(Badge)生成小徽章shields网站开源项目的徽章lib版本徽章代码测试覆盖度开源协议Github workflow的徽章 开源代码实践效果py-enumjs-enumerate 什么是徽章(Badge) 在开源项目的README中&#xff0c;经常会见到一些徽章(Badge)小图标&#xff0c;如…

抽烟行为检测:从传统巡查到智能算法

在当前人工智能和计算机视觉技术的迅猛发展下&#xff0c;基于视觉分析的抽烟行为检测算法成为一种高效的技术手段。此类算法通常依赖于深度学习模型&#xff0c;特别是卷积神经网络&#xff08;CNN&#xff09;&#xff0c;通过对摄像头捕捉的视频流进行实时分析&#xff0c;能…

租赁系统|北京租赁系统|租赁软件开发流程

在数字化时代的浪潮下&#xff0c;小程序成为了各行各业争相探索的新领域。租赁行业亦不例外&#xff0c;租赁小程序的开发不仅提升了用户体验&#xff0c;更为商家带来了更多商业机会。本文将详细解析租赁小程序的开发流程&#xff0c;为有志于进军小程序领域的租赁行业从业者…

AI爆文写作:如果你有一篇文章爆了,正确的做法是:自己抄袭自己,重复发,还可以继续爆!

爆款总是相似的&#xff0c;如果你有一篇文章爆了&#xff0c;正确的做法&#xff0c;就是重复发&#xff0c;让它继续爆下去。 以前我在小红书看到一个人&#xff0c;将一篇自己火的笔记&#xff0c;连续发了5次&#xff0c;每次点赞数据都不错。 公众号文章也是一样的。 我…

【LeetCode】【209】长度最小的子数组(1488字)

文章目录 [toc]题目描述样例输入输出与解释样例1样例2样例3 提示进阶Python实现前缀和二分查找滑动窗口 个人主页&#xff1a;丷从心 系列专栏&#xff1a;LeetCode 刷题指南&#xff1a;LeetCode刷题指南 题目描述 给定一个含有n个正整数的数组和一个正整数target找出该数组…

Spring Boot 3.3 正式发布,王炸级更新,应用启动速度直接起飞!

最新消息&#xff0c;Spring Boot 一次性发布了 3 个版本&#xff1a; 3.3.0 3.2.6 3.1.13 Spring Boot 3.3 正式发布了&#xff0c;3.1.x 在前几天也停止维护了。 最新的支持版本如下&#xff1a; 从路线图可以看到每个版本的终止时间&#xff0c;每个版本的生命周期只有…

【VUE】 如何关闭ESlint的自动修复功能

问题描述例如&#xff1a;原书写代码ESLint自动修复报错如下 方案一、在文件中添加屏蔽警告的代码html代码中JavaScript代码中 方案二、关闭ESLint的自动修复功能1、VSCode 扩展找到 ESLint 插件2、在设置中找到在 settings,json 中编辑3、将"autoFix": true改为&quo…

跟TED演讲学英文:Bring on the learning revolution! by Sir Ken Robinson

Bring on the learning revolution! Link: https://www.ted.com/talks/sir_ken_robinson_bring_on_the_learning_revolution Speaker: Sir Ken Robinson Date: February 2010 文章目录 Bring on the learning revolution!IntroductionVocabularySummaryTranscriptAfterword I…

ingress-nginx控制器安装(ingress ImagePullBackOff )

支持的版本&#xff08;查看自己的kubernetes版本替换安装过程中的版本选择合适的版本安装&#xff09; 安装过程&#xff1a; 这里不采用helm的方式&#xff0c;而是采用YAML manifest的方式来安装。 下载ingress-nginx的https://raw.githubusercontent.com/kubernetes/ingr…

开放式耳机什么牌子好用?五大高分力作安利,不容错过!

​开放式耳机如今备受瞩目&#xff0c;其独特的不入耳设计不仅避免了长时间佩戴对耳道的压力&#xff0c;还维护了耳朵的卫生健康&#xff0c;特别受运动爱好者和耳机发烧友青睐。然而&#xff0c;市场上的开放式耳机品质良莠不齐&#xff0c;让许多消费者在选择时陷入困惑。作…

滑动谜题 leetcode的BFS题目 启发如何写一个拼图编程呢

题目链接 题目要求&#xff0c;要将上面的拼板拼成123450 首先&#xff0c;转换为字符串&#xff0c;为什么要转换为字符串呢&#xff0c;因为处理会变得很简单比如示例一&#xff0c;转化为字符串是12345&#xff0c;目标字符串为123450&#xff0c;只需要证明通过某种交换&a…

Linux环境基础开发工具的使用(yum,vim,gcc/g++,make/Makefile,gdb)

Linux 软件包管理器-yum 什么是软件包及安装方式 在Linux下安装软件, 一个通常的办法是下载到程序的源代码, 并进行编译, 得到可执行程序。 但是这样太麻烦了, 于是有些人把一些常用的软件提前编译好, 做成软件包(可以理解成windows上的安装程序)放在一个服务器上, 通过包管理…

使用HTTP长连接减少文件描述符和端口占用

在当今互联网技术飞速发展的背景下&#xff0c;高并发处理能力已经成为衡量服务器性能的一个重要标准。面对高并发场景&#xff0c;服务器需要同时应对大量的请求&#xff0c;这就带来了一个棘手的问题&#xff1a;资源有限。具体来说&#xff0c;文件描述符和端口号&#xff0…

【全开源】点餐小程序系统源码(ThinkPHP+FastAdmin+UniApp)

基于ThinkPHPFastAdminUniApp开发的点餐微信小程序&#xff0c;类似肯德基&#xff0c;麦当劳&#xff0c;喜茶等小程序多店铺模式&#xff0c;支持子商户模式&#xff0c;提供全部前后台无加密源代码和数据库&#xff0c;支持私有化部署。 革新餐饮行业的智慧点餐解决方案 一…

世界机器人大赛的含金量高吗?

世界机器人大赛的含金量非常高。 世界机器人大赛&#xff08;World Robot Contest&#xff09;是世界机器人大会&#xff08;World Robot Conference&#xff09;的重要组成部分&#xff0c;自2015年起已成功举办了多届&#xff0c;吸引了全球20余个国家的众多选手参赛。这一赛…

python02 循环与容器

一、if的条件判断 1-1 if elif else 判断年龄属于哪个年龄段 # 判断学生 core input(请输入成绩) ​ if int(core) >90 :print(优秀) elif int(core) >70 and int(core) <90:print(中等) elif int(core) >60 and int(core) <70:print(及格) else:print(不及…