React Hooks中如何正确更新状态？数组状态更新失效问题求助

嘿，你这是踩了React状态更新的经典坑啦！核心问题出在直接修改了原状态数组，没有创建新的引用，导致React检测不到状态变化，所以useEffect没触发更新。

为什么会这样？ #

React的状态更新机制依赖于引用的变化来判断是否需要触发重渲染。当你写let featuresClone = features;的时候，这只是把原数组的引用赋值给了新变量——本质上featuresClone和features指向的是同一个数组。你修改这个数组的内容后，传给setFeatures的还是原来的引用，React会认为“状态没变化”，自然不会更新组件，useEffect也不会执行。

另外，你控制台里的console.log(featuresClone, features)看起来数组变了，但features其实还是旧值，因为setState是异步操作，不会立刻更新状态。

怎么修复？ #

你需要创建原数组的新副本，修改副本后再传给setFeatures，这样React就能检测到引用变化了。这里有几种常用的方式：

方式1：使用扩展运算符（最常用）

const [features, setFeatures] = useState([''])
const addFeature = (event)=>{
  event.preventDefault();
  // 用扩展运算符创建原数组的浅拷贝
  const featuresClone = [...features];
  featuresClone.push('');
  setFeatures(featuresClone);
}

方式2：使用函数式更新（更安全，尤其是依赖之前状态的时候）

如果你的更新依赖于上一次的状态，推荐用这种方式，避免异步更新带来的问题：

const [features, setFeatures] = useState([''])
const addFeature = (event)=>{
  event.preventDefault();
  setFeatures(prevFeatures => {
    // 返回新数组
    return [...prevFeatures, ''];
  });
}

方式3：使用concat方法

concat会返回一个新数组，也能达到效果：

const addFeature = (event)=>{
  event.preventDefault();
  setFeatures(features.concat(['']));
}

关键总结 #

React的状态是不可变的，永远不要直接修改原状态对象或数组，一定要通过创建新的引用（新对象/新数组）来更新状态，这样React才能正确触发组件重渲染和相关的副作用（比如你的useEffect）。

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