React状态变更未触发组件重渲染问题及解决

问题场景 #

• 用MUI Table构建表格，表格行由持久化存储的状态数组生成
• 表格最后一行包含TextField和添加按钮，点击按钮调用addFond函数
• 函数内尝试向状态数组添加新数据并调用setDefaults更新状态，但组件完全不重渲染，顶层console.log无输出
• Table嵌入在高阶组件中

根因分析 #

React的状态变更检测依赖引用变化，如果直接修改原状态对象（比如直接用push修改数组、直接修改对象属性），状态的引用没有改变，React会判定状态未发生变化，因此不会触发组件重渲染。

举个错误写法的例子：

// 错误：直接修改原状态数组
const addFond = () => {
  const newItem = { name: "新数据" };
  defaults.push(newItem); // 直接修改原数组
  setDefaults(defaults); // 传递的还是原数组的引用
};

解决方案 #

必须创建状态的新引用来触发React的变更检测，常见的正确写法有两种：

1. 展开运算符生成新数组 #

// 正确：通过展开原数组创建新引用
const addFond = () => {
  const newItem = { id: Date.now(), name: "新条目" }; // 示例数据
  setDefaults([...defaults, newItem]);
};

2. 函数式更新（更推荐） #

如果状态是从持久化存储获取，或者存在异步更新的可能，用函数式更新能避免状态快照过期的问题：

// 函数式更新，基于前一次状态生成新状态
const addFond = () => {
  const newItem = { id: Date.now(), name: "新条目" };
  setDefaults(prevDefaults => [...prevDefaults, newItem]);
};

额外提醒 #

如果状态是嵌套的对象或数组，要确保每一层都创建新的引用，不能直接修改深层的原对象，否则同样会导致变更检测失效。

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