React未使用useState setter却更新父组件状态的异常问题

为什么状态会被修改？ #

• 你的data是对象/数组这类引用类型，传递给LeafComponent的specificData只是原data对象中对应属性的引用，并非独立副本。
• 直接给specificData.text赋值，本质是在修改原data对象在内存中的内容，所以根组件的data会同步变化，但这种操作完全绕开了React的状态更新机制，属于非法修改。

为什么监听data的useEffect未触发？ #

• React判断状态是否变化的核心逻辑是引用对比：只有当状态的引用地址发生改变时，React才会认为状态更新，进而触发组件重渲染和对应的副作用。
• 你只是修改了data内部的属性值，并没有改变data本身的引用地址，React会判定状态没有“真正变化”，所以不会触发监听data的useEffect。而点击按钮打印时，是直接读取内存中的最新值，所以能看到更新后的结果，但组件本身并没有重新渲染。

正确的解决方式 #

必须遵循React状态不可变更新的原则，通过setData创建新的引用触发状态更新：

// 在LeafComponent中通过setData更新状态
const handleTextUpdate = (newText) => {
  setData(prevData => ({
    ...prevData,
    // 假设specificData是prevData下的子属性，根据实际结构调整
    specificData: {
      ...prevData.specificData,
      text: newText
    }
  }));
};

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