React函数组件状态Hook—useState《进阶-对象数组》

React函数组件状态-state

对象 state

state 中可以保存任意类型的 JavaScript 值,包括对象。但是,你不应该直接修改存放在 React state 中的对象。相反,当你想要更新⼀个对象时,你需要创建⼀个新的对象(或者将其拷⻉⼀ 份),然后将 state 更新为此对象。
官⽹说明:https://react.docschina.org/learn/updating-objects-in-state

改变对象state逻辑:

  1. 把所有存放在 state 中的 JavaScript 对象都视为只读的
  2. 你需要创建⼀个新对象并把它传递给 state 的设置函数
  3. 使⽤扩展运算符拷⻉对象 “…”
import React, { useState } from "react";
const App = () => {const [message, setMessage] = useState({name: "吴用",website: "teacherself.com"})const changeName = () => {setMessage({ ...message, name: "安徽吴彦祖",website:"asdasdas" })}return (<div><h1>{message.name}</h1><h1>{message.website}</h1><button onClick={changeName}>更改title</button></div>);
}
export default App;

改变嵌套对象逻辑

… 展开语法本质是“浅拷⻉”,它只会复制⼀层。当你想要更新⼀个嵌套属性时,你必须得多次使 ⽤展开语法。

	setMessage({ ...message, staff: { ...message.staff, hobby: "洗脚" } });

使⽤ Immer 编写简洁的更新逻辑(针对复杂的对象数据!)

如果你的 state 有多层的嵌套,你或许应该考虑将其扁平化。但是,如果你不想改变 state 的数据结构,你可能更喜欢⽤⼀种更便捷的⽅式来实现嵌套展开的效果,Immer是⼀个⾮常流⾏的库,它可以让你使⽤简便但可以直接修改的语法编写代码,并会帮你处理好复制的过程。

安装:

 npm install use-immer  

引入

 import { useImmer } from "use-immer";

使用:

import React from "react";
import { useImmer } from "use-immer";
const App = () => {const [message, setMessage] = useImmer({name: "吴用",website: "teacherself.com"})const changeName = () => {// setMessage({ ...message, name: "安徽吴彦祖",website:"asdasdas" })setMessage((draft)=>{draft.name = "安徽吴彦祖"})}return (<div><h1>{message.name}</h1><h1>{message.website}</h1><button onClick={changeName}>更改title</button></div>);
}
export default App;

数组 state

数组是另外⼀种可以存储在 state 中的 JavaScript 对象,它虽然是可变的,但是却应该被视为不可
变。同对象⼀样,当你想要更新存储于 state 中的数组时,你需要创建⼀个新的数组(或者创建⼀
份已有数组的拷⻉值),并使⽤新数组设置 state。

改变数组state逻辑

  • 数组是另一种对象,你需要将React state中的数组视为只读的。
  • 不能直接修改原来数组,相反需要生成一个新的数组。
    react 改变数组state逻辑
    数组添加删除元素
import React, { useState } from "react";
const App = () => {const [name, setName] = useState("")const [person, setPerson] = useState([{ id: 0, name: "老王" }])return (<div><h1>react学习</h1><input value={name} onChange={(e) => { setName(e.target.value) }} /><button onClick={() => {setPerson([...person, { id: person.length, name: name }])}}>添加</button><button onClick={() => {setPerson(person.filter((i) => i.id !== item.id))}}>删除</button><ul>{person.map((item) => (<li key={item.id}>{item.name}<button onClick={() => {setPerson(person.filter((i) => i.id !== item.id))}}>删除</button></li>))}</ul></div>);
}
export default App;

react中state数组元素的操作

使⽤Immer编写简洁代码逻辑

import React, { useState } from "react";
import { useImmer } from "use-immer";
const App = () => {const [name, setName] = useState("")const [person, setPerson] = useImmer([{ id: 0, name: "老王",check: false}])const handleChek=(id,checked)=>{setPerson((darft)=>{const checkItem = darft.find((i)=>i.id===id)checkItem.check = checked})}const deleteTab=(item)=>{setPerson(person.filter((i)=>i.id!==item.id))}return (<div><h1>react学习</h1><input value={name} onChange={(e) => { setName(e.target.value) }} /><button onClick={() => {setPerson([...person, { id: person.length, name: name,check: false}])}}>添加</button><button onClick={() => {// setPerson(person.filter((i) => i.id !== item.id))setPerson(person.filter((i)=>!i.check))}}>批量删除</button><ul>{person.map((item) => (<li key={item.id}>          <input type="checkbox" checked={item.check} onChange={(e)=>handleChek(item.id,e.target.checked)} />{item.name}<button onClick={()=>deleteTab(item)}>删除</button></li>))}</ul></div>);
}
export default App;

react中state的数组增加删除

React函数组件的副作⽤Hook-useEffec

React函数组件的副作⽤useEffec
使⽤useEffect实现计数器⼩案例

import React, { useEffect, useState } from "react";
import { root } from "./main";
const App = () => {const [counte, setCounte] = useState(0);const [name, setName] = useState("⼩滴课堂");// 增加const add = () => {setCounte((counte) => counte + 1);};// 改变const change = () => {setName("xdclass.net");};// 卸载组件const handelDelete = () => {root.unmount();};useEffect(() => {let timer = setInterval(() => {setCounte((counte) => counte + 1);}, 1000);return () => {clearInterval(timer);console.log("组件卸载了");};}, []);return (<div><h1>当前的计数:{counte}</h1><button onClick={add}>增加</button><h1>{name}</h1><button onClick={change}>改变</button><button onClick={handelDelete}>卸载组件</button></div>);
};
export default App;

react对象及其数组操作完结~

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

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

相关文章

股票指标信息(六)

6-指标信息 文章目录 6-指标信息一. 展示股票的K线图数据,用于数据统计二. 展示股票指标数据,使用Java处理,集合形式展示三. 展示股票目前的最新的指标数据信息四. 展示股票指标数据,某一个属性使用Java处理五. 展示股票的指标数据,用于 Echarts 页面数据统计六. 展示股票指标数…

MAX/MSP SDK学习05:A_GIMME方法

今天终于将A_GIMME方法部分的描述看懂了&#xff0c;上周因为太赶时间加上这文档很抽象一直没看懂。也就那么一回事&#xff0c;记录一下。 A_GIMME方法用于接收多个参数&#xff1a; #include "ext.h" // standard Max include, always required #include "…

RedisConnectionFactory is required已解决!!!!

1.起因&#x1f936;&#x1f936;&#x1f936;&#x1f936; redis搭建完成后&#xff0c;准备启动主程序&#xff0c;异常兴奋&#xff0c;结果报错了&#xff01;&#xff01;&#xff01;&#xff01; 2.究竟是何原因 &#x1f62d;&#x1f62d;&#x1f62d;&#x1f…

关于在3dsmax中制作的模型导入UE后尺寸大小不对的问题

现象 在3dsmax中的基本单位为毫米 在UE中基本单位是厘米 我在3dsmax中创建一个长宽高均为1000mm的方块 然后导入到UE中的世界坐标原点 方块向X轴正方向移动100个单位100cm1000mm&#xff0c;按理来说&#xff0c;新方块的此时应该和旧方块是贴着的&#xff0c;但是现象确是两者…

力扣 2. 两数相加

Problem: 2. 两数相加 思路与算法 Code /*** Definition for singly-linked list.* public class ListNode {* int val;* ListNode next;* ListNode() {}* ListNode(int val) { this.val val; }* ListNode(int val, ListNode next) { this.val val; this…

NSSCTF web刷题记录6

文章目录 [HZNUCTF 2023 final]eznode[MoeCTF 2021]地狱通讯-改[红明谷CTF 2022] Smarty Calculator方法一 CVE-2021-26120方法二 CVE-2021-29454方法三 写马蚁剑连接 [HZNUCTF 2023 final]eznode 考点&#xff1a;vm2沙箱逃逸、原型链污染 打开题目&#xff0c;提示找找源码 …

QT打包圆心识别

圆心点识别QT界面封装 最近在练习QT相关内容&#xff0c;找了个相关功能集成了下&#xff0c;主要是为了熟悉各个组件&#xff0c;功能主要是进行圆心识别。 主要涉及的QT功能点&#xff1a; 1.日志可视化 2.按钮及各类参数添加组件 3.水印添加及图片可视化 4.许可添加 5.主线…

OpenLayers实战,WebGL图层根据Feature要素的变量动态渲染多种颜色的三角形,适用于大量三角形渲染不同颜色

专栏目录: OpenLayers实战进阶专栏目录 前言 本章使用OpenLayers根据Feature要素的变量动态渲染不同颜色的三角形。 通过一个WebGL图层生成四种不同颜色的图形要素,适用于WebGL图层需要根据大量点要素区分颜色显示的需求。 更多的WebGL图层使用运算符动态生成样式的内容将会…

测试用例的8大设计原则

我们看到的大部分关于测试用例设计的文章&#xff0c;都在讲等价类、因果图、流程法等内容&#xff0c;这是关于测试用例的具体设计方法层面。本文想讨论的重点是&#xff0c;测试用例设计该遵循什么原则&#xff0c;有哪些思维和观点有助于产出更好的测试设计&#xff0c;这些…

CNP实现应用CD部署

上一篇整体介绍了cnp的功能&#xff0c;这篇重点介绍下CNP产品应用开发的功能。 简介 CNP的应用开发&#xff0c;主要是指的应用CD部署的配置管理。 应用列表&#xff0c;用来创建一个应用&#xff0c;一般与项目对应&#xff0c;也可以多个应用对应到一个项目。具体很灵活。…

结合两个Python小游戏,带你复习while循环、if判断、函数等知识点

&#x1f490;作者&#xff1a;insist-- &#x1f490;个人主页&#xff1a;insist-- 的个人主页 理想主义的花&#xff0c;最终会盛开在浪漫主义的土壤里&#xff0c;我们的热情永远不会熄灭&#xff0c;在现实平凡中&#xff0c;我们终将上岸&#xff0c;阳光万里 ❤️欢迎点…

Ubuntu18.04安装LeGO-LOAM保姆级教程

系统环境&#xff1a;Ubuntu18.04.6 LTS 1.LeGO-LOAM的安装前要求&#xff1a; 1.1 ROS安装&#xff1a;参考我的另一篇博客Ubuntu18.04安装ROS-melodic保姆级教程_灬杨三岁灬的博客-CSDN博客文章浏览阅读168次。Ubuntu18.04安装ROS-melodic保姆级教程https://blog.csdn.net/…

鸿蒙系统扫盲(二):再谈鸿蒙是不是安卓套壳?

最近小米发布了澎湃OS&#xff0c;vivo发布了蓝OS&#xff0c;好像自从华为回归后&#xff0c;大伙都开始写自己的OS了&#xff0c;小米官方承认是套壳安卓&#xff0c;然后被大家喷了&#xff0c;于是鸿蒙是不是安卓套壳的话题又回到了大众的视野&#xff0c;今天在讨论下这个…

解决uncompyle6反编译报错KeyError

报错内容&#xff1a;KeyError&#xff1a;3.11.0 &#xff08;这个是我自己的Python版本号&#xff09; 主要原因就是你的Python版本没在它库文件支持的版本里&#xff0c;我们需要进行手动添加即可。 首先找到文件&#xff1a;magics.py 我的是在这个路径下&#xff1a;D:\…

5.2 Windows驱动开发:内核取KERNEL模块基址

模块是程序加载时被动态装载的&#xff0c;模块在装载后其存在于内存中同样存在一个内存基址&#xff0c;当我们需要操作这个模块时&#xff0c;通常第一步就是要得到该模块的内存基址&#xff0c;模块分为用户模块和内核模块&#xff0c;这里的用户模块指的是应用层进程运行后…

ubuntu linux C/C++环境搭建

目录 前言 1.1 vim安装与配置 ​编辑 1.2 vim配置 1.3 gcc g编译器的安装 与gdb调试器的安装 1.4 写个C/C程序测试一下 1.6 vscode安装 1.7 vscode插件下载​编辑 前言 在开始C之前&#xff0c;我们需要搭建好C的开发环境&#xff0c;我这里使用的操作系统是ubuntu Linux&a…

Java实现象棋算法

象棋算法包括搜索算法、评估函数和剪枝算法。以下是一个简单的实现&#xff1a; 搜索算法&#xff1a;使用极大极小值算法&#xff0c;即每个玩家都会做出最好的选择&#xff0c;考虑到对方也会做出最好的选择&#xff0c;所以需要搜索多层。 public int search(int depth, i…

数据库-索引

一、概述 索引是SQL优化的核心 索引(index)是帮助MySQL高效获取数据的数据结构。在数据之外&#xff0c;数据库系统还维护着满足特定查找算法的数据结构&#xff0c;这些数据结构以某种引用(指向数据)&#xff0c;这样可以在这些数据结构上实现高级查找算法&#xff0c;这种数…

深度学习之基于YoloV5抽烟检测系统

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 基于YOLOv5&#xff08;You Only Look Once&#xff09;的抽烟检测系统可以用于实时检测图像或视频中是否存在抽烟行…