React中调用useState的setStateX后组件未重渲染，是什么原因？

• React 中 useState 触发组件重渲染的前提是：传入的新状态与旧状态浅比较结果为不相等。对于数组、对象这类引用类型的值，浅比较只会对比内存引用地址，不会深层校验内部元素/属性的变化。
• 你的代码中 let copy = stateX 只是把原数组的内存引用赋值给了copy变量，两者指向完全相同的数组对象。后续执行copy.push()是直接修改原数组的内部内容，数组的内存引用地址没有发生任何变化。
• 调用setStateX(copy)时，React 比对新旧状态的引用完全一致，会判定状态无更新，因此直接跳过了组件重渲染。

你需要基于原 state 生成一个全新的数组，再传入 state setter 方法即可正常触发更新，两种常用写法如下：

• 写法1：创建新数组后修改再赋值

const addAnotherComponent = (e) => {
    // 展开运算符创建和原数组内容一致、但引用地址不同的新数组
    let copy = [...stateX];
    copy.push(<AnotherComponent/>);
    setStateX(copy);
};

• 写法2：使用函数式更新直接返回新数组，写法更简洁

const addAnotherComponent = (e) => {
    setStateX(prevState => [...prevState, <AnotherComponent/>]);
};

注意：React state 遵循不可变原则，永远不要直接修改原 state 的值，所有状态变更都应该生成全新的引用类型值再提交更新，避免出现渲染异常、状态不同步等问题。

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