單對象變化問題
- 聲明一個方法
- 在頁面中監聽這個對象的改變
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
-- 填個坑