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

你遇到的核心问题是直接修改了状态数组的引用，React的状态更新依赖于引用的变化来触发重渲染和副作用监听，下面具体拆解：

你的代码错误点 #

在addFeature函数里，这段写法存在关键问题：

let featuresClone = features;
featuresClone.push('');
setFeatures(featuresClone);

这里的featuresClone = features并没有创建新数组，只是把原状态数组的引用赋值给了新变量——也就是说，你修改featuresClone其实就是在修改原状态数组本身。React会对比状态更新前后的引用是否相同，因为引用没变化，它就会认为状态没有更新，自然不会触发useEffect的监听，也不会触发组件重渲染。

另外你控制台里的fetaures应该是笔误，写成了features的错拼，不过这不是核心问题啦。

React Hooks中正确更新数组状态的方法 #

要更新数组类型的状态，必须创建一个新的数组引用，给你几种常用的正确方式：

• 扩展运算符（推荐，简洁直观）：

  const addFeature = (event)=>{
    event.preventDefault();
    // 扩展原数组，添加新元素，生成全新数组
    setFeatures([...features, '']);
  }
  

• concat方法：
  concat会返回一个包含原数组元素和新元素的新数组，不会修改原数组：

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

• 函数式更新（适合异步或依赖前状态的场景）：
  如果你的更新逻辑依赖于上一次的状态，用函数式更新能避免闭包导致的旧状态问题：

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

补充说明 #

不光是数组，对象类型的状态更新也要遵循同样的原则：永远不要直接修改原对象，必须创建新的对象来更新状态，这样React才能正确识别状态变化，触发对应的渲染和副作用。

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