使用React useState的setAttr未触发重渲染，如何强制触发？

核心问题 #

你代码里的var new_attr = attr是引用赋值，相当于直接操作原状态对象。React判断状态是否变化是对比前后状态的引用，引用没改的话，就不会触发重渲染。

正确的合并写法 #

必须创建新的对象来合并attr和data，以下是几种常用方法：

1. 展开运算符（最简洁推荐） #

// 建议初始化时设为空对象，避免undefined报错
const [attr, setAttr] = useState({});

const onSetAttr = (data) => {
    // 先展开原attr的所有属性，再用data的属性覆盖同名键，生成全新对象
    const newAttr = { ...attr, ...data };
    setAttr(newAttr);
};

2. Object.assign方法 #

const onSetAttr = (data) => {
    // 以空对象为基础，合并attr和data，返回新对象
    const newAttr = Object.assign({}, attr, data);
    setAttr(newAttr);
};

3. 处理深层嵌套对象 #

如果attr是多层嵌套的结构，浅拷贝不够用，得针对性更新嵌套属性：

const onSetAttr = (data) => {
    setAttr(prevAttr => ({
        ...prevAttr,
        // 比如更新嵌套的info字段
        info: {
            ...prevAttr.info,
            ...data.info
        }
    }));
};

关于强制重渲染的说明 #

虽然能通过自定义钩子（比如useForceUpdate）或者额外的状态变量来强制触发重渲染，但这种做法不推荐——它绕开了React的状态管理逻辑，容易引发难以排查的bug。遵循不可变更新原则，让状态引用真正变化，才是正确的解决方式。

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