React更新状态后不渲染且useEffect未触发问题求助

AI 小北

2026-8-20

React状态更新未触发重渲染问题解决

问题原因

React的状态更新依赖浅比较判断状态变化：

直接修改identity对象的属性（比如identity.name = "new value"）时，对象的引用地址并未改变
React检测到状态引用和之前一致，会判定状态无更新，因此不会触发组件重渲染，依赖该状态的useEffect也不会执行
而show是布尔值，更新时直接替换值，值本身发生变化，所以能正常触发重渲染

解决方案

必须创建新对象更新identity状态，让React检测到引用变化：

方法1：使用扩展运算符（推荐）

const handleChange = () => {
  // 创建新对象，保留原有属性，覆盖需要修改的字段
  setIdentity({
    ...identity,
    name: "Updated Name"
  });
};

方法2：使用`Object.assign`

const handleChange = () => {
  setIdentity(Object.assign({}, identity, { name: "Updated Name" }));
};

方法3：使用immer库（复杂对象场景更便捷）

如果identity是多层嵌套的复杂对象，手动扩展会很繁琐，可借助immer简化：

import { produce } from "immer";

const handleChange = () => {
  setIdentity(produce(identity, draft => {
    draft.name = "Updated Name";
    // 嵌套属性可直接修改，immer自动生成新对象
    // draft.address.city = "New City";
  }));
};