点击按钮后React数组未更新，useEffect未触发该如何解决？

核心问题 #

你直接原地修改了useState创建的状态数组，没有调用setTest传入新的数组实例：
React的状态更新、useEffect依赖监听都是基于浅比较引用判断是否变化，你调用test.unshift("4")是在原数组上直接修改，数组的内存引用并没有发生变化，React无法检测到状态更新，因此不会触发页面重渲染，也不会执行监听test的useEffect回调。

修复代码 #

把onChange函数修改为如下写法即可：

const onChange = () => {
  console.log("onChange");
  // 构造新数组传入setTest，触发状态更新
  setTest(["4", ...test]);
};

如果你要保留unshift的写法，也可以先拷贝原数组再操作：

const onChange = () => {
  console.log("onChange");
  // 基础类型数组浅拷贝即可得到新数组实例
  const newTest = [...test];
  newTest.unshift("4");
  setTest(newTest);
};

注意事项 #

• 所有React状态都不允许原地修改，数组的push、unshift、pop、splice，对象直接修改属性值都属于原地修改操作，不会触发更新
• 必须调用状态对应的set方法，传入新的引用值，才会触发React的重渲染流程

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