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

東方幻想郷2024-03-21 14:04

單對象變化問題

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

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

聲明一個方法

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

js 复制代码

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

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

js 复制代码

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

                                      -- 填個坑