React跨组件更新状态后useEffect未触发，原因是什么？

核心原因 #

React判断状态是否更新的依据是引用的变化，而非值的变化。你在代码中直接修改了原数组的内容，并且将同一个数组引用传递给setMyState，React会认为前后状态的引用一致，判定状态没有发生实质性变化，因此不会触发依赖myState的useEffect。

看你的代码细节：
在MyComponent2的handleChange函数中：

let list = props.myState;
list.push(`${e.target.value}`);
props.setMyState(list);

• let list = props.myState只是把原数组的引用赋值给了list，并没有创建新数组
• list.push(...)直接修改了原数组的内部内容，但数组本身的引用没有改变
• 最后setMyState(list)传递的还是原来的数组引用，React检测不到变化

修复方案 #

你需要创建一个新的数组来更新状态，让React能检测到引用变化：

方案1：使用扩展运算符创建新数组

function handleChange(e) {
  setInputValue(e.target.value);
  // 创建原数组的副本，再添加新元素
  props.setMyState([...props.myState, e.target.value]);
}

方案2：使用concat方法返回新数组

function handleChange(e) {
  setInputValue(e.target.value);
  // concat会返回新数组，不会修改原数组
  props.setMyState(props.myState.concat(e.target.value));
}

方案3：使用slice复制原数组后修改

function handleChange(e) {
  setInputValue(e.target.value);
  // slice()无参数时会返回原数组的浅拷贝
  const newList = props.myState.slice();
  newList.push(e.target.value);
  props.setMyState(newList);
}

关键提示 #

React的状态必须遵循不可变性原则，永远不要直接修改原状态对象或数组，而是通过创建新的副本进行更新。直接修改原状态会导致React无法正确追踪状态变化，引发useEffect不触发、组件不重新渲染等问题。

内容的提问来源于stack exchange，提问作者Mehmet Güdük