reactjs 在React中比较状态变量和局部变量

a7qyws3x 于 2022-12-26 发布在 React

关注(0)|答案(2)|浏览(215)

我有一个react状态变量，我想检查是否有什么变化，然后我的**useEffect（）钩子可以感应到，并 * show * me the submit button visible.因此我有原来的const变量，我用useState（）**做了相同变量的状态副本.
例如：

const abc = {MONDAY:{OperatingHours: ["00:00", "23:59"], toggle: false}, TUESDAY:...};
    const[stateAbc, setStateAbc] = useState(MONDAY:{OperatingHours: ["00:00", "23:59"], toggle: false}, TUESDAY:...});

我想在我的React组件中比较这两个变量。如果showButton设置为false，我将不会使按钮可见，否则我将使它可见。
当我在运行应用程序时将状态变量更改（如 * OperatingHours *）回初始状态["00：00"，"23：59"]时，我无法进入此条件（abc === stateAbc），并且提交按钮仍然可见：

const initialRender = useRef(true);
    
    useEffect(() => {
    if (initialRender.current) {
      initialRender.current = false;
    }
    if (abc === stateAbc) {
      setSubmitButtonDisabled(true);    // This condition is never meeting
    }
    if (abc !== stateAbc) {
      setSubmitButtonDisabled(false);
    }
  }, [stateAbc]);

reactjs

来源：https://stackoverflow.com/questions/74912416/comparing-the-state-variable-with-the-local-variable-in-react

2条答案

按热度按时间

bhmjp9jg1#

将对象与===进行比较，仅当对象相同时才给出true：

const a = { name: "John Doe" };
const b = a;
console.log(a === b); // true
----
const a = { name: "John Doe" };
const b = { name: "John Doe" };
console.log(a === b); // false

有时候你会看到开发人员使用JSON.stringify(a) === JSON.stringify(b)，但它一点也不安全，对象属性的顺序并不总是相同的：

const a = { name: "John Doe", age: 30 };
const b = { age: 30, name: "John Doe" };
console.log(a, b) // { name: "John Doe", age: 30 } { age: 30, name: "John Doe" }

如果要比较的对象很简单（所有值都是基元值），则可以通过迭代以下属性来比较它们：

let equals = true;
for (let key in a){
   if (a[key] !== b[key]) equals = false;
}

但是如果你有嵌套对象，最好的方法是使用一个npm包进行比较，比如deep-equal。

赞(0）回复(0）举报 2022-12-26

xzlaal3s2#

如果我们有两个对象Obj_1和Obj_2
在JavaScript中，当比较两个对象时，条件Obj_1 === Obj_2将比较Obj_1对象的引用与Obj_2对象的引用...这意味着即使两个对象内部包含相同的属性..比较也将始终返回false！
从谷歌中快速搜索“如何比较两个对象”。。我找到的第一个答案是在进行比较之前先将对象字符串化。。这意味着将对象及其属性转换为字符串，然后在字符串之间进行比较：）

JSON.stringify(Obj_1) === JSON.stringify(Obj_2)

你的情况应该是这样的

if (JSON.stringify(abc) === JSON.stringify(stateAbc)) {
  setSubmitButtonDisabled(true); 
}

赞(0）回复(0）举报 2022-12-26

我来回答

reactjs 在React中比较状态变量和局部变量

2条答案

相关问题

热门标签

最新问答