【前端学习——react坑】useState使用

问题

使用useState 时,例如

const [selectedId, setSelectedId] = useState([false,true,false]);

这样直接利用,无法引发使用selectedId状态的组件的变化,但是selectedId是修改了的

 let temp=selectedId;temp[toggledId]=selectedId[toggledId]===false?true:false;setSelectedId(temp);

原因

一句话。let temp=selectedId;没有创建新的数组

这实际上是将 temp 设置为 selectedId 的引用,而不是一个新的数组。这意味着 temp 和 selectedId 共享相同的内存地址,它们指向相同的数组。所以,当你修改 temp 时,也会影响到 selectedId。

你直接修改了 selectedId 数组的值,React无法检测到setSelectedId前后状态的变化,因此不会触发 React 组件的重新渲染。

下面这个方法也不推荐,因为虽然 updatedSelectedId 这个数组是新的,但是其内部的元素本身与原数组 selectedId是相同的。因此,修改 updatedSelectedId[toggledId],其实是在修改原始的 selectedId对象。这样虽然会触发渲染,但是如果此时有另一个地方有着相同的初始 state,他们的 state 会被共享,也就是说你把本不该改变的状态也改变了。

  // 创建一个新的数组,保持不可变性const updatedSelectedId = [...selectedId];updatedSelectedId[toggledId] = !updatedSelectedId[toggledId];// 更新状态setSelectedId(updatedSelectedId);

解决

我们在更新state时要将state视为不可变的,你不应该使用类似于 arr[0] = ‘bird’ 这样的方式来重新分配数组中的元素,也不应该使用会直接修改原始数组的方法,例如 push() 和 pop()。可以通过使用像 filter() 和 map() 这样不会直接修改原始值的方法,从原始数组生成一个新的数组
在这里插入图片描述

其中数组展开运算符…还允许你把新添加的元素放在原始的 …artists 之。如此,展开操作就可以完成 push() 和 unshift() 的工作,将新元素添加到数组的末尾和开头。

因此这里我们通过map来产生新的数组

setMyList(selectedId.map((item,id)=> {if (id === toggledId) {return !item;} else {return item;}
}));

... 展开语法本质是是**“浅拷贝”——它只会复制一层**。这使得它的执行速度很快,但是也意味着当你想要更新一个嵌套属性时,你必须得多次使用展开语法。

为什么在 React 中不推荐直接修改 state?

在这里插入图片描述

更新 state 中的数组

即使你拷贝了数组,你还是不能直接修改其内部的元素。这是因为数组的拷贝是浅拷贝——新的数组中依然保留了与原始数组相同的元素。因此,如果你修改了拷贝数组内部的某个对象,其实你正在直接修改当前的 state。

const nextList = [...list];
nextList[0].seen = true; // 问题:直接修改了 list[0] 的值
setList(nextList);

nextList 和 list 是两个不同的数组,nextList[0] 和 list[0] 却指向了同一个对象。因此,通过改变 nextList[0].seen,list[0].seen 的值也被改变了。

解决:可以使用 map 在没有 mutation 的前提下将一个旧的元素替换成更新的版本。

setMyList(myList.map(artwork => {if (artwork.id === artworkId) {// 创建包含变更的*新*对象return { ...artwork, seen: nextSeen };} else {// 没有变更return artwork;}
}));

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

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

相关文章

Cloudflare Worker 部署bingai

Cloudflare Worker 部署 1. 注册 Cloudflare 账号 2. 一键部署 登录账户后, 点击下面链接 https://deploy.workers.cloudflare.com/?urlhttps://github.com/Harry-zklcdc/go-proxy-bingai 点击「Authorize Workers」, 登录 Github 账号授权 Cloudflare 点击「I have a ac…

Flutter 中的 Tooltip 小部件:全面指南

Flutter 中的 Tooltip 小部件:全面指南 在用户界面设计中,提示信息是一种常见的交互元素,用于向用户提供额外的信息或对界面元素的说明。Flutter 的 Tooltip 小部件正是为此目的而设计,它在用户长按或悬停在某个元素上时显示一段…

React18+TypeScript搭建通用中后台项目实战03 自定义加载状态组件

拦截器 请求拦截器 修改 src/api/request.ts 核心代码: req.interceptors.request.use(// 拦截配置并更新配置config > {// 获取登录tokenconst token localStorage.getItem("token")// 使用 JWT Tokenif (token) {config.headers.Authorization …

kubernetes集群pod理论介绍

前言 在 Kubernetes 中,Pod 是最小的可部署单元,它是一个或多个容器的集合,这些容器共享网络和存储资源,并在同一主机上运行。在本文中,我们将进一步探讨 Kubernetes 集群中的 Pod,包括 Pod 的定义、调度管…

C++成员函数 - 析构函数

析构函数 析构函数 是特殊的成员函数,其 特征 如下: 1. 析构函数名是在类名前加上字符 ~ 。 2. 无参数无返回值类型。 3. 一个类只能有一个析构函数。若未显式定义,系统会自动生成默认的析构函数。注意:析构函数不能重 载 …

组成aim的方法数2(无限多张)

题目描述:arr是面值数组,其中的值都是正数且没有重复,再给定一个正数aim,每个值都认为是一种面值,且认为张数是无线的,返回组成aim的方法数。例如,arr[1,2],aim4,方法有&…

Mysql基础(七)DQL之select 语句(二)

一 select 语句续 WHERE子句后面跟着的是一个或多个条件,用于指定需要检索的行COUNT(): 多少条数据 where 11 和 count(1) 与 count(*) count(1)、count(*)和count(指定字段)之间的区别 ① order by 排序 mysql 之数据排序扩展 1、使用 order by 语句来实现排序2、排序可…

洛谷P3574 [POI2014] FAR-FarmCraft(树形dp)

洛谷 P 3574 [ P O I 2014 ] F A R − F a r m C r a f t (树形 d p ) \Huge{洛谷P3574 [POI2014] FAR-FarmCraft(树形dp)} 洛谷P3574[POI2014]FAR−FarmCraft(树形dp) 文章目录 题意题目说明 思路标程 题目…

nuxt: generate打包后访问资源404问题

现象 使用Nuxt.js开发的个人页面,部署到nginx服务器中,/_nuxt/*.js、/_nuxt/*.css等静态问题不能访问,提示404错误。 而我们的这些资源文件是存在的。 解决方法 加上此处代码进行上下文配置 baseURL: /nuxt/ 此时在nginx配置 /nuxt 代理 lo…

【Maven打包将resources/lib/下的jar也打包进jar包中】

Maven打包将resources/lib/下的jar也打包进jar包中 &#xff01;&#xff01;&#xff01;少走弯路 第一步 resources/lib/下引入jar ftp4j-1.7.2.jar替换为自己jar包的名称 <dependency><groupId>it.sauronsoftware.ftp4j</groupId><artifactId>ft…

张大哥笔记:穷人都在拼命挣钱,而富人都在努力让自己更值钱

最近行业大佬&#xff0c;纷纷网红化&#xff0c;比如周鸿祎&#xff0c;雷军&#xff0c;刘强东纷纷下场&#xff01; 大佬当网红&#xff0c;图啥&#xff1f;当然是图钱了。 大佬都很精的&#xff0c;他们老早就运用媒体的传播杠杆&#xff0c;把自己热度炒起来。 在不断…

hyperf 多对多关联模型

这里使用到三张表&#xff0c;一张是用户&#xff08;users&#xff09;&#xff0c;一张是角色(roles)&#xff0c;一张是用户角色关联表(users_roles)&#xff0c; 首先创建用户模型、角色模型 php bin/hyperf.php gen:model users php bin/hyperf.php gen:model rolesusers…

屎山代码SSM转换Springboot

SSM项目转Springboot项目 最近很多人可能是在网上买的那种屎山代码&#xff0c;数据库都是拼音的那种 比如项目如下所示&#xff1a; 这种屎山代码我改过太多了&#xff0c;很多人可能无从下手&#xff0c;因为代码结构太混乱了&#xff0c;但是我改过太多这种代码&#xff0…

[BT]小迪安全2023学习笔记(第29天:Web攻防-SQL盲注)

第29天 盲注 基于布尔 ?id1 and length(database())7通过AND&#xff0c;当数据库名字长度等于7时返回正常页面&#xff0c;否则返回其他&#xff08;或错误&#xff09;页面 其他函数&#xff1a; left(databse(),a)&#xff1a;截取数据库名的左侧前a位字符 substr(a,b,c…

Spring Boot:将文件推送到 FTP 服务器

在企业应用中&#xff0c;将文件推送到 FTP 服务器是一个常见的需求。本文将介绍如何在 Spring Boot 项目中实现将文件推送到 FTP 服务器&#xff0c;包括引入依赖、自定义配置和编写代码示例。 1. 引入依赖 首先&#xff0c;在 Spring Boot 项目的 pom.xml 文件中引入 Apach…

QGraphicsView中鼠标位置图像缩放时不变

设置QGraphicsView的变换锚和调整尺寸锚到鼠标下面的操作&#xff0c;是一个很常见的模式&#xff0c;尤其在实现图形视图的缩放和滚动功能时。这两行代码的作用是提高用户与图形界面交互的直观性和效率。 setTransformationAnchor(QGraphicsView::AnchorUnderMouse)&#xff1…

ASP+ACCESS公司门户网站建设

【摘 要】随着计算机科学的发展&#xff0c;数据库技术在Internet中的应用越来越广泛&#xff0c;为广大网络用户提供了更加周到和人性化的服务。本文讲解了一个公司的网站的建设&#xff0c;它基于数据关联规则的公司个性化页面及动态数据生成案例&#xff0c;在网页方面&…

甲方怒喷半小时:一次项目上线失败的深刻教训

哈喽大家好,这里是你们的老朋友小米~最近工作忙得不可开交,这不,昨夜又是一个通宵夜,因为一些原因导致了项目上线失败。今天在会议上被甲方喷了整整半个小时,我心里五味杂陈,但作为一个技术分享爱好者,我决定把这次经历记录下来,希望能给大家一些启发。 需求背景:一个…

HDFS,HBase,MySQL,Elasticsearch ,MongoDB分别适合存储什么特征的数据?

HDFS&#xff08;Hadoop Distributed File System&#xff09;通常用于存储大规模数据&#xff0c;适合存储结构化和非结构化数据&#xff0c;例如文本文件、日志数据、图像和视频等。 HBase是基于Hadoop的分布式数据库&#xff0c;适合存储大量非结构化和半结构化的数据&…

编程基础:掌握运算符与优先级

新书上架~&#x1f447;全国包邮奥~ python实用小工具开发教程http://pythontoolsteach.com/3 欢迎关注我&#x1f446;&#xff0c;收藏下次不迷路┗|&#xff40;O′|┛ 嗷~~ 目录 一、运算符的基石&#xff1a;加减乘除 二、比较运算符&#xff1a;判断数值大小 三、整除…