重新了解一下之前的單對象變化問題

單對象變化問題

  • 聲明一個方法
  • 在頁面中監聽這個對象的改變

2年之前寫過一篇文章,有些誤導,重新寫一遍

聲明一個方法

不管是在哪裡,創建一個名為 single-object.jsx 的文件

export const singleObject = (newObj, oldObj) => {return JSON.stringify(newObj) == JSON.stringify(oldObj);
}

在頁面中監聽這個對象的改變

import { useState, useEffect } from "react";
import { singleObject } from './common/single-object.jsx'const App = () => {const [objOne, setObjOne] = useState({ name: "objOne" });const [objOneCopy, setObjOneCopy] = useState({});useEffect(() => {setObjOneCopy({...objOne});}, []);useEffect(() => {console.log(singleObject(objOne, objOneCopy));}, [objOne, objOneCopy]);const changeObj = async () => {await setObjOne({ name: "objOne_change" });}return (<div className="App"><div>objOne: {JSON.stringify(objOne)}</div><div>objTwo: {JSON.stringify(objOneCopy)}</div><button onClick={changeObj}>改變obj_one</button></div>);
}export default App;

總之,這個代碼是利用與在你做出一個操作後,你想知道你這個對象有沒有哪裡發生過改變,如果對象的keys或者對象的value有發生過改變,就會返回false,因為使用了JSON.stringify則會做出全方位的檢查,能改變的應該也只有key:value

                                      -- 填個坑

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

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

相关文章

美团门票度假java实习(66m)

1.介绍一下redisson分布式锁 2.redission分布式锁底层如何实现 3.基于setnx实现的分布式锁的缺点有哪些 4.基于redis如何实现可重入的分布式锁 5.项目的qps大概多少 6.如何自己实现一个限流算法中的滑动窗口 8.code&#xff1a;用两个队列实现一个栈&#xff0c;java语言 9.jvm…

jupyter | jupyter里执行shell命令

先说结论&#xff1a; 在 shell 命令前加 ! tar -zxvf sp.tgzFile "<ipython-input-2-3125352daeb6>", line 1tar -zxvf sp.tgz^ SyntaxError: invalid syntax 在 jupyter Code Cell中只能执行ls 、pwd 等简单命令。当需要执行tar 或者稍微负责命令时就报错了…

数据库被.[Goodmorningfriends@onionmail.org].faust勒索病毒加密,能恢复吗?

.faust勒索病毒有什么特点及危害&#xff1f; .faust勒索病毒是一种恶意软件&#xff0c;以其复杂的加密技术和勒索行为而闻名。这种病毒的主要目标是通过加密受害者的数据文件&#xff0c;然后勒索赎金以解密这些文件。它通常通过恶意附件、恶意链接或潜在的不安全下载源传播&…

在realsense D455相机上运行orb_slam3

配置orb_slam3的环境 参考https://blog.csdn.net/weixin_42990464/article/details/133019718?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522171109916816777224423276%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request…

操作符详解(C语言)—第三期

逻辑操作符 逻辑操作符有哪些&#xff1a; && 逻辑与 || 逻辑或区分逻辑与和按位与 区分逻辑或和按位或 1&2----->0 1&&2---->1 1|2----->3 1||2---->1逻辑与和或的特点&#xff1a; 360笔试题 #include <stdio.h&…

蓝桥杯2023省赛:蜗牛|DFS暴力、DP动态规划

题目链接&#xff1a; 1.蜗牛 - 蓝桥云课 (lanqiao.cn) 思路说明&#xff1a; 首先&#xff0c;考虑DFS暴力解&#xff1a;对于蜗牛来说&#xff0c;它出发的起点可能是&#xff1a; 1、Xi竹竿底部2、从上一根杆Xi-1传送门传送到的bi&#xff0c; 那么他有三种方式走&…

JS08-DOM节点完整版

DOM节点 查找节点 父节点 <div class="father"><div class="son">儿子</div></div><script>let son = document.querySelector(.son)console.log(son.parentNode);son.parentNode.style.display = none</script>通过…

2024年阿里云2核4G服务器价格30元、165元和199元1年

阿里云2核4G服务器租用优惠价格&#xff0c;轻量2核4G服务器165元一年、u1服务器2核4G5M带宽199元一年、云服务器e实例30元3个月&#xff0c;活动链接 aliyunfuwuqi.com/go/aliyun 活动链接如下图&#xff1a; 阿里云2核4G服务器优惠价格 轻量应用服务器2核2G4M带宽、60GB高效…

element-table 悬浮header

/* * table-sticky.js 混入函数 * 组件需要提供parent字段&#xff0c;指定表格的className&#xff08;字符串&#xff09; * 在页面局部组件使用此组件&#xff0c;如果局部组件有使用display为none,会导致header头显示不全&#xff0c;可使用v-if重新初始化组件 */const …

babel主要内容

定义 babel是一个编译工具 &#xff0c;用于把JSX等编译成浏览器可执行的javascript。 主要内容是几个包babel/parser 这个包主要是用于解析代码到AST树babel/types 这个包中有一堆API&#xff0c;用于手动创建ASTbabel/traverse 这个包主要是为了遍历AST树&#xff0c;结合具体…

Python计算机二级选择易错题(二)

选择题第07&#xff0c;05&#xff0c;01套 题目来源&#xff1a;python计算机二级真题&#xff08;选择题&#xff09; - 知乎 选择题第07套 选择题第05套 选择题第01套 ​​​​ s.index(x)或s.index(x,i,j)返回序列s从i开始到j位置中第一次出现元素x的位置 ​​​​​​

2001-2023年中国各省市级是否属于“开通高铁”城市匹配数据

2001-2023年中国各省市级是否属于“开通高铁”城市匹配数据 1、时间&#xff1a;2001-2023年 2、范围&#xff1a;300个地级市&#xff08;包括直辖市&#xff09; 3、来源&#xff1a;历年中国铁道出版社出版的《全国铁路旅客列车时刻表》 4、用途&#xff1a;高铁开通可作…

Unity---Lua语言

Lua Binaries Download 13.2 逻辑热更新——Lua1-3_哔哩哔哩_bilibili nil表示空 只有false和nil为false&#xff0c;其他值都为true ..连接两个字符串

实景户外亲子公园剧本杀小程序开发搭建

实景户外亲子公园剧本杀小程序开发搭建需要以下步骤&#xff1a; 1. 确定需求和功能&#xff1a;根据客户需求和剧本杀游戏的特点&#xff0c;确定小程序需要实现的功能和界面设计。 2. 选择开发平台&#xff1a;选择适合小程序的开发平台&#xff0c;如微信小程序、支付宝小…

java 泛型(下)

本篇文章主要说明的是类型通配符、可变参数、可变参数的使用等。 在学习之前&#xff0c;希望能对泛型有个大概了解&#xff0c;可参考链接 java 泛型&#xff08;上&#xff09;-CSDN博客 也希望对泛型类、泛型接口、泛型方法有个大概的认识及使用&#xff0c;可参考链接 j…

数据类型转换篇(一)

文章目录 7.1 ascii()7.2 bin()7.3 bool()7.4 bytearray()7.5 bytes()7.6 chr()7.8 complex()7.9 dict()7.10 eval() 7.1 ascii() ascii() 是 Python 的内置函数&#xff0c;用于将一个对象转换为其“ASCII”表示形式。具体来说&#xff0c;它返回一个字符串&#xff0c;该字符…

什么是485数据采集模块?

在工业自动化、智能楼宇、环境监测等众多领域&#xff0c;数据的采集与传输是实现智能化管理的关键。而485数据采集模块&#xff0c;作为一种高效、稳定的数据采集设备&#xff0c;正日益受到广泛关注。HiWoo Box&#xff0c;作为一款卓越的485数据采集模块&#xff0c;以其强大…

Maven 环境一键部署

文章目录 一、场景说明二、脚本职责三、参数说明四、操作示例五、注意事项 一、场景说明 本自动化脚本旨在为提高研发、测试、运维快速部署应用环境而编写。 脚本遵循拿来即用的原则快速完成 CentOS 系统各应用环境部署工作。 统一研发、测试、生产环境的部署模式、部署结构、…

Penpad 生态资产 $PDD 即将LaunchPad ,一文读懂Season 2 规则

Penpad 是 Scroll 上的 LauncPad 平台&#xff0c;该平台继承了 Scroll 底层的技术优势&#xff0c;并基于零知识证明技术&#xff0c;推出了系列功能包括账户抽象化、灵活的挖矿功能&#xff0c;并将在未来实现合规为 RWA 等资产登录 Scroll 生态构建基础。该平台被认为是绝大…

前端快速实现点击图片下载

目录 方法一&#xff1a;同源使用标签下载图片 方法二&#xff1a;跨域使用将canvas上的内容转换为Blob对象并下载 在前端开发中&#xff0c;有时候我们需要实现点击图片后直接下载的功能。本文将介绍两种方法来实现这一功能&#xff1a; 同源使用<a>标签下载图片跨域使…