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函数则用于删除指定索引的项。这两个函数都会导致组件重新渲染,显示更新后的数组状态。

封面图

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

JDBC(Java DataBase Connectivity)Java数据库连接

JDBC(Java DataBase Connectivity) Java 语言连接数据库 再本模块中,java提供里一组用于连接数据库的类和接口Java 语言开发者,本身没有提供如何具体连接数据库的功能只是定义了一组java程序连接数据库的访问接口 连接到数据库向数据库发送增,修改,删除这一类的sql发送查询sq…

CATIA入门操作——为什么大佬的工具栏是水平的?如何把工具栏变水平?

目录 引出工具栏怎么变成水平&#xff1f;总结发生肾么事了&#xff1f;&#xff1f;鼠标中键旋转不了解决&#xff1a;特征树不显示参数关系 我的窗口去哪了&#xff1f;插曲&#xff1a;草图工具的调出插曲&#xff1a;颜色工具栏显示 弹窗警告警告&#xff1a;创建约束是临时…

linux系统介绍

Linux是一种免费使用和自由传播的类Unix操作系统&#xff0c;它是一个基于POSIX和Unix的多用户、多任务、支持多线程和多CPU的操作系统。Linux起源于1991年&#xff0c;由芬兰程序员林纳斯托瓦兹&#xff08;Linus Torvalds&#xff09;创建&#xff0c;并迅速获得了全球开发者…

香橙派华为昇腾CANN架构编译opencv4.9

香橙派华为升腾AI盒子 为啥要编译opencv4.9.0&#xff0c; 因为在4.9.0 中增加了华为昇腾CANN的外接开发库&#xff0c;下图为盒子外观&#xff0c;此次一接到这个盒子&#xff0c;立刻开始开箱操作&#xff0c;首先就是要编译opencv4.9&#xff0c;以前在香橙派3588 的盒子中…

抖音极速版:抖音轻量精简版本,新人享大福利

和快手一样&#xff0c;抖音也有自己的极速版&#xff0c;可视作抖音的轻量精简版&#xff0c;更专注于刷视频看广告赚钱&#xff0c;收益比抖音要高&#xff0c;可玩性更佳。 抖音极速版简介 抖音极速版是一个提供短视频创业和收益任务的平台&#xff0c;用户可以通过观看广…

当前时机是否适合进入 AIGC 行业:行业发展与市场需求分析

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

下一代Docker会让部署更丝滑吗

下一代Docker会让部署更丝滑吗 如何通俗易懂的理解DockerDocker有什么缺点Docker与AI结合&#xff0c;会让部署更加丝滑吗 随着互联网技术的不断发展&#xff0c;单机系统已经无法满足日益正常的用户量以及正常处理用户请求&#xff0c;这个时候就需要进行多机部署&#xff0c;…

贝锐向日葵打造农机设备远程运维支持方案

当物联网“万物互联”的概念向第一产业赋能&#xff0c;农机设备的智能化程度也越来越高。 所谓农业物联网&#xff0c;即在应用层将大量的传感器节点构成监控网络&#xff0c;通过各种传感器采集信息&#xff0c;以帮助农民及时发现问题&#xff0c;并准确地判定发生问题的位…

1099: 希尔排序算法实现

解法&#xff1a; 希尔增量选定n/2&#xff0c; #include<iostream> #include<vector> using namespace std; int main() {int n;cin >> n;vector<int> vec(n);for (int i 0; i < n; i) cin >> vec[i];int d n / 2;for (int i 0; i <…

【C语言】指针运算

前言 前面在“走进指针世界”中我已经讲解过指针相关的很多前置知识&#xff0c;其实还有一个很重要的部分就是指针的运算。这篇博客&#xff0c;就让我们一起了解一下指针的运算吧&#xff01; 指针作为变量&#xff0c;是可以进行算术运算的&#xff0c;只不过情况会和整型…

上门服务系统开发|东邻到家系统|上门服务系统开发流程

上门服务小程序的开发流程是一个复杂且精细的过程&#xff0c;涉及到需求分析、设计规划、开发实施、测试验收以及上线运营等多个环节。下面将详细介绍上门服务小程序的开发流程&#xff0c;帮助读者全面了解并掌握其中的关键步骤。 一、需求分析 在开发上门服务小程序之前&am…

RedisTemplateAPI:String

文章目录 ⛄1 String 介绍⛄2 命令⛄3 对应 RedisTemplate API❄️❄️ 3.1 添加缓存❄️❄️ 3.2 设置过期时间(单独设置)❄️❄️ 3.3 获取缓存值❄️❄️ 3.4 删除key❄️❄️ 3.5 顺序递增❄️❄️ 3.6 顺序递减 ⛄4 以下是一些常用的API⛄5 应用场景 ⛄1 String 介绍 Str…

hive3从入门到精通(一)

Hive3入门至精通(基础、部署、理论、SQL、函数、运算以及性能优化)1-14章 第1章:数据仓库基础理论 1-1.数据仓库概念 数据仓库&#xff08;英语&#xff1a;Data Warehouse&#xff0c;简称数仓、DW&#xff09;,是一个用于存储、分析、报告的数据系统。 数据仓库的目的是构…

世界上首位AI程序员诞生,AI将成为人类的对手吗?

3月13日&#xff0c;世界上第一位AI程序员Devin诞生&#xff0c;不仅能自主学习新技术&#xff0c;自己改Bug&#xff0c;甚至还能训练和微调自己的AI模型&#xff0c;表现已然远超GPT-4等“顶流选手”。 AI的学习速度如此之快&#xff0c;人类的教育能否跟上“机器学习”的速…

3100点失守,小丑竟是我自己

敏感时刻&#xff0c;亮剑的我们股市买单&#xff0c;海的那边反倒还涨了&#xff0c;好生气啊&#xff01;就连我们胡主编昨晚都气得睡不着&#xff0c;一点多了还在那抒发情感&#xff0c; 确实&#xff0c;有句话说到心窝里了&#xff1a;小散们是拿真金白银撑场子的&#x…

瑞芯微RV1126——ffmpeg环境搭建

本篇文章来介绍一下&#xff0c;在ubuntu上搭建一个比较完整的ffmpeg环境需要的步骤以及流程。为后期将我们开发的应用程序移植到RV1126开发板上做准备。 在安装ffmpeg之前&#xff0c;为了方便后续的操作&#xff0c;我们可以先搭建好samba服务器。所以本节将分为两个部分&am…

Java中的继承和多态

继承 在现实世界中&#xff0c;狗和猫都是动物&#xff0c;这是因为他们都有动物的一些共有的特征。 在Java中&#xff0c;可以通过继承的方式来让对象拥有相同的属性&#xff0c;并且可以简化很多代码 例如&#xff1a;动物都有的特征&#xff0c;有名字&#xff0c;有年龄…

人生苦短,我学python之数据类型(上)

个人主页&#xff1a;星纭-CSDN博客 系列文章专栏&#xff1a;Python 踏上取经路&#xff0c;比抵达灵山更重要&#xff01;一起努力一起进步&#xff01; 目录 一.元组 &#xff08;tuple&#xff09; 二.集合&#xff08;set&#xff09; 三.字典(dict) 一.元组 &#…

WPF密码输入框明文掩码切换

1&#xff0c;效果 2&#xff0c;代码&#xff1a; WPF的PasswordBox不能像Winform中的PasswordBox那样&#xff0c;通过PasswordBox.PasswordChar(char)0显示明文。所以这里使用无外观控件构筑掩码明文切换。 无外观控件遵守Themes/Generic.xaml文件配置. <ResourceDicti…

视觉检测实战项目——九点标定

本文介绍九点标定方法 已知 9 个点的图像坐标和对应的机械坐标,直接计算转换矩阵,核心原理即最小二乘拟合 {𝑥′=𝑎𝑥+𝑏𝑦+𝑐𝑦′=𝑎′𝑥+𝑏′𝑦+𝑐′ [𝑥1𝑦11𝑥2𝑦21⋮⋮⋮𝑥9𝑦91][𝑎𝑎′𝑏𝑏′𝑐𝑐′]=[𝑥1′𝑦…