React Hooks：修改对象后组件未重新渲染问题咨询

这个问题的核心是React的状态更新依赖引用变化，而你的代码里直接修改了原状态对象的属性，没有创建新的对象引用，导致React认为状态没有改变，所以不会触发组件重渲染。

具体问题分析 #

来看你在setData回调里的代码：

let newResults = results;
newResults.Companies = newArr.slice(0);
console.log(newResults);
return setResults(newResults);

这里的let newResults = results;只是把results的引用赋值给了newResults——也就是说，两个变量指向同一个内存中的对象。你修改newResults.Companies的时候，其实直接修改了原状态对象的属性，并没有创建新的对象。

React的useState在更新状态时，会对新旧状态进行浅比较：如果前后状态的引用地址相同，React就会判定状态没有发生变化，因此不会触发组件的重渲染，也不会更新状态值，这就是为什么console.log(results)没有再次执行的原因。

解决方案：创建新的对象副本 #

要让React识别到状态变化，你需要创建一个全新的对象，而不是修改原对象。有几种常见的方式：

1. 使用扩展运算符（推荐）

扩展运算符可以快速创建对象的浅拷贝，然后覆盖Companies属性：

setData={(newArr) => {
  const newResults = {
    ...results, // 拷贝原对象的所有属性
    Companies: newArr.slice(0) // 替换Companies属性
  };
  console.log(newResults);
  setResults(newResults);
}}

2. 使用Object.assign

和扩展运算符效果类似，通过Object.assign创建新对象：

setData={(newArr) => {
  const newResults = Object.assign({}, results);
  newResults.Companies = newArr.slice(0);
  console.log(newResults);
  setResults(newResults);
}}

3. 函数式更新（更安全的写法）

当新状态依赖于旧状态时，推荐使用函数式更新——这种写法可以避免闭包导致的旧状态引用问题：

setData={(newArr) => {
  setResults(prevResults => ({
    ...prevResults,
    Companies: newArr.slice(0)
  }));
}}

这里prevResults是React提供的最新状态值，确保你总是基于最新的状态进行修改，不会因为闭包拿到旧的状态引用而出错。

额外提醒 #

• 对于数组和对象这类引用类型的状态，永远不要直接修改原状态，一定要通过创建新的副本的方式来更新状态，这样React才能正确识别状态变化并触发重渲染。
• 如果你只是需要更新Companies数组，也可以单独把Companies抽成一个独立的状态，这样更新起来更简单，不过这取决于你的业务场景。

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