React中父组件回调无法感知子组件数组更新（push场景）

问题核心在于React对state的更新依赖浅比较：当你直接修改原数组（比如info.length = 0后再push新元素），数组的引用地址并没有改变，setInfo接收的还是原来的数组引用，React会判定state未发生变化，因此不会触发组件重渲染，页面自然无反应。

具体解决方法： #

• 基于原数组副本修改后更新：
  通过扩展运算符、slice()等方法生成原数组的新副本，修改副本后再传给setInfo，确保引用地址更新：

  const handleClick = () => {
    // 生成原数组的新副本
    const newInfo = [...info];
    // 修改副本内容
    newInfo.length = 0;
    newInfo.push({name: 'new name'});
    // 用新副本更新state
    setInfo(newInfo);
  };
  

• 直接传入全新数组：
  像你已经验证有效的方式一样，直接创建新数组传入setInfo，这是最简洁的方案：

  const handleClick = () => {
    setInfo([{name: 'new name'}]);
  };
  

关键原则： #

React要求state具备不可变性，对于数组、对象这类引用类型的state，永远不要直接修改原数据，必须返回一个新的引用值，这样React才能正确识别state变化并触发组件更新。

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