React中状态变量与本地变量比较的异常问题排查

问题根源 #

JavaScript里对象、数组属于引用类型，===运算符比较的是变量指向的内存地址，而非实际内容。哪怕stateAbc的内容和abc完全一致，它们也是两个独立的引用对象，所以abc === stateAbc永远会返回false。

解决方案 #

1. 自定义深度比较函数 #

写一个递归函数，逐个比对对象的所有属性值，确保内容完全一致：

const isEqual = (obj1, obj2) => {
  // 基本类型或引用完全相同时直接返回true
  if (obj1 === obj2) return true;
  // 排除非对象/空值的情况
  if (typeof obj1 !== 'object' || obj1 === null || typeof obj2 !== 'object' || obj2 === null) {
    return false;
  }
  // 比对键名数量
  const keys1 = Object.keys(obj1);
  const keys2 = Object.keys(obj2);
  if (keys1.length !== keys2.length) return false;
  // 递归比对每个键对应的值
  for (const key of keys1) {
    if (!keys2.includes(key) || !isEqual(obj1[key], obj2[key])) {
      return false;
    }
  }
  return true;
};

然后替换useEffect里的比较逻辑：

const initialRender = useRef(true);

useEffect(() => {
  if (initialRender.current) {
    initialRender.current = false;
    return;
  }
  // 用自定义函数判断内容是否一致
  setSubmitButtonDisabled(isEqual(abc, stateAbc));
}, [stateAbc]);

2. 使用JSON.stringify（简单场景适用） #

如果你的对象里没有函数、Symbol、循环引用这类无法被JSON序列化的内容，可以用这个快速方法：

const initialRender = useRef(true);

useEffect(() => {
  if (initialRender.current) {
    initialRender.current = false;
    return;
  }
  // 转成字符串后比对内容
  setSubmitButtonDisabled(JSON.stringify(abc) === JSON.stringify(stateAbc));
}, [stateAbc]);

⚠️ 注意：这种方法有局限性，比如对象属性顺序不同时会被判定为不等，且无法处理特殊类型的属性。

3. 优化初始状态赋值 #

初始状态可以直接复用abc，避免重复编写相同的对象结构：

const abc = {MONDAY:{OperatingHours: ["00:00", "23:59"], toggle: false}, TUESDAY:{/* 你的其他配置 */}};
const [stateAbc, setStateAbc] = useState(abc);

额外优化 #

可以把原本的两个if合并成一次状态赋值，简化代码逻辑：

// 替代原来的两个if判断
setSubmitButtonDisabled(isEqual(abc, stateAbc));

内容的提问来源于stack exchange，提问作者Ayush