react使用useState更新数组失败

失败案例:

  const [addBox, setAddBox] = useState([])const itemAdd = (item) =>{addBox.push(item);setAddBox(addBox)console.log(addBox,'点击添加按钮')}

原因:react的useState hook监听的是浅监听

在 React 中,使用 useState Hook 来更新数组时,直接对数组进行操作(例如使用 push() 方法)是无法触发组件重新渲染的。这是因为 React 使用浅比较(shallow comparison)来比较前后状态值的引用,如果引用相同,React 会认为状态没有发生变化,从而不会重新渲染组件。

而在使用解构赋值时,我们会创建一个新的数组实例,并将其赋值给一个新的变量。由于每次渲染都会创建新的数组实例,React 可以正确地检测到数组的变化,并触发组件的重新渲染。

解决方法:解构

setAddBox([...addBox])

成功案例:

  const [addBox, setAddBox] = useState([])const itemAdd = (item) =>{let nowBox = [...addBox,item];setAddBox(nowBox)console.log(nowBox,'点击添加按钮')}

解构参考地址:ES6 入门教程

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

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

相关文章

junit.Test 的使用方法

在 Maven 项目中使用 JUnit,你需要在项目的 pom.xml 文件中添加 JUnit 依赖。然后,你可以创建测试类,并在测试类中使用 Test 注解标识测试方法。 文章目录 基本使用其他注解Before 和 AfterBeforeClass 和 AfterClassIgnoreRunWith参数化测试…

C#判断骨龄与生活年龄的比较

什么是骨龄 骨龄是骨骼年龄的简称,它能体现人体生长发育程度。随着生长发育,不同年龄段的骨骺发育成熟度不一样而出现不同的影像特征,是骨龄检测的理论基础。手指腕掌具有20多块骨骼,在各个年龄段具有不同的特点,因而…

009:vue结合el-table实现表格行拖拽排序(基于sortablejs)

文章目录 1. 实现效果2. 安装 sortablejs 插件3. 完整组件代码4. 注意点 1. 实现效果 2. 安装 sortablejs 插件 sortablejs 更多用法 cnpm i --save sortablejs3. 完整组件代码 <template><div class"home"><div class"body"><el-ta…

MongoDB 面试题

MongoDB 面试题 1. 什么是MongoDB&#xff1f; MongoDB是一种非关系型数据库&#xff0c;被广泛用于大型数据存储和分布式系统的构建。MongoDB支持的数据模型比传统的关系型数据库更加灵活&#xff0c;支持动态查询和索引&#xff0c;也支持BSON格式的数据存储&#xff0c;这…

catboost回归自动调参

import os import time import optuna import pandas as pd from catboost import CatBoostRegressor from sklearn.metrics import r2_score, mean_squared_error from sklearn.model_selection import train_test_split X_train data.drop([‘label’, ‘b1’, ‘b2’], a…

探究公有云中的巨人:深入分析大数据产品的架构设计

目录 一、服务器分类 二、公有云基础和产品 网络 vpc专有网络 弹性公网IP(Elastic IP)

3种事件绑定的异同(js的问题)

html事件 dom0事件 dom2事件 • 广义javascript ECMAScript DOM BOM DOM0 DOM1 DOM2 • 狭义javascript ECMAScript ES6 ES5 ES3 事件监听的优点&#xff1a;可以绑定多个事件&#xff0c;常规的事件绑定只执行最后绑定的事件 事件绑定&#xff1a;相当于存储…

从外网访问内网服务器:安装到使用一站通

如果你所在的是一个小的实验室&#xff0c;可能并没有大型的服务器集群而是仅是配备了小型服务器&#xff0c;日常工作便是在在局域网内访问服务器进行各项数据处理。因为在外网无法访问内网服务器&#xff0c;极大的限制了我们偶尔在外想监测一下数据的欲望。本文介绍了一种简…

策略模式(及案例)

策略模式 1.策略接口 定义一组算法或操作的通用接口&#xff0c;通常是一个抽象类或接口。该接口声明了策略类所必须实现的方法。 示例&#xff1a; class Strategy {doOperation() {} }2.具体策略 实现策略接口&#xff0c;提供具体的算法实现。每个具体策略类负责处理一…

二、C#基础语法( 函数与方法)

在C#语言中&#xff0c;函数和方法都是用于实现特定功能的代码块。虽然它们有一些相似之处&#xff0c;但它们在使用和定义上有一些细微的差别。 函数&#xff08;Functions&#xff09; 函数在C#中是独立的功能单元&#xff0c;执行特定操作并返回一个值。函数的定义以关键字…

postman win7 低版本 postman7.0.9win64 postman7.0.9win32

百度网盘&#xff1a; postman7.0.9win64&#xff1a; 链接: https://pan.baidu.com/s/18ck9tI0r9Pqoz36MOwwnnQ 提取码: rkf7 postman7.0.9win32&#xff1a; 链接: https://pan.baidu.com/s/1HrpGPrgvVzyAcjdHuwVOpA 提取码: ke5k win7系统安装postman&#xff0c;可能会…

postman使用-04响应

文章目录 响应响应界面说明Pretty&#xff1a;格式化显示&#xff0c;以便查看Raw&#xff1a;不进行任何处理&#xff0c;显示响应数据的原始格式Preview&#xff1a;预览响应体&#xff0c;会自动换行&#xff0c;不会格式化&#xff08;有时候是数据&#xff0c;有时候是页面…

leetcode151. 反转字符串中的单词

题目描述 给你一个字符串 s &#xff0c;请你反转字符串中 单词 的顺序。 单词 是由非空格字符组成的字符串。s 中使用至少一个空格将字符串中的 单词 分隔开。 返回 单词 顺序颠倒且 单词 之间用单个空格连接的结果字符串。 注意&#xff1a;输入字符串 s中可能会存在前导…

测试-FastJSON和Jackson-JSON库

文章目录 FastJSONJackson注意 FastJSON 直接读代码&#xff1a; Log4j2 public class FastJsonTest {Testpublic void test1() {// JSON转对象-parseObjectString jsonString "{\"name\":\"张三\",\"age\":18}";Student student …

实战 | 使用OpenCV快速去除文档中的表格线条(步骤 + 源码)

导 读 本文主要介绍如何使用OpenCV快速去除文档中的表格线条,并给详细步骤和代码。 背景介绍 测试图如下,目标是去除下面三张图中的表格线条,方便后续图像处理。 实现步骤 下面演示详细步骤,以图1为例: 【1】获取二值图像:加载图像、转为灰度图、OTSU二值化 i…

日本it培训班,日本IT大体分几类?

日本是一个老龄化极其严重的国家&#xff0c;拜泡沫经济破灭后的经济停滞所赐&#xff0c;民众取得了节育方面的丰硕成果&#xff0c;然而当经济终于走出阴霾&#xff0c;呈现复苏迹象时&#xff0c;短缺的劳动力又成了一大问题&#xff0c;拖累整个经济的步伐。为了应对劳工市…

仪表盘、数据分析新增分享功能及应用服务下新增服务实例菜单

近期&#xff0c;博睿数据根据一体化智能可观测平台 Bonree ONE 产品本身&#xff0c;以及用户反馈进行持续的更新和优化。以下为 Bonree ONE 产品功能更新报告第03期内容&#xff0c;更多探索&#xff0c;未完待续。 本次迭代的更新集中在平台的仪表盘、数据分析新增分享功能&…

C++面向对象(OOP)编程-C++11新特性详解

C11作为一个重要的版本&#xff0c;引入了很多新的特性&#xff0c;解决了C语言本身很多遗留的内存泄露问题&#xff0c;并且提供了很多比较灵活的用法。引入的auto&#xff0c;智能指针、线程机制都使得C语言的灵活性、安全性、并发性有了很大的提升。 本文会比较详细的介绍C1…

Kubernetes 学习总结(41)—— 云原生容器网络详解

背景 随着网络技术的发展&#xff0c;网络的虚拟化程度越来越高&#xff0c;特别是云原生网络&#xff0c;叠加了物理网络、虚机网络和容器网络&#xff0c;数据包在网络 OSI 七层网络模型、TCP/IP 五层网络模型的不同网络层进行封包、转发和解包。网络数据包跨主机网络、容器…

IntelliJ IDE 插件开发 | (四)开发一个时间管理大师插件

系列文章 IntelliJ IDE 插件开发 |&#xff08;一&#xff09;快速入门IntelliJ IDE 插件开发 |&#xff08;二&#xff09;UI 界面与数据持久化IntelliJ IDE 插件开发 |&#xff08;三&#xff09;消息通知与事件监听IntelliJ IDE 插件开发 |&#xff08;四&#xff09;开发一…