React数组状态变量异常：无法正确清空数组

问题1：调用setTaken清空数组后，console.log输出旧值 #

React的状态更新是异步批量处理的，调用setTaken之后，组件不会立刻重新渲染，taken变量也不会马上变成新值。你在setTaken之后直接打印taken，拿到的还是更新前的旧状态。

解决办法：如果需要确认数组是否清空，用useEffect监听taken的变化，当状态更新完成后再执行打印：

const onEnter = () => {
  // 直接设为空数组即可，不需要函数式更新（除非依赖旧状态做修改，这里清空不需要）
  setTaken([]);
};

// 在组件主体（顶层作用域）添加监听
useEffect(() => {
  // 当taken变为空数组时打印
  if (taken.length === 0) {
    console.log('taken已清空:', taken);
  }
}, [taken]); // 依赖项设为taken，状态变化时触发

问题2：在onEnter函数内使用useEffect报错 #

React的Hook有严格的调用规则：所有Hook必须在函数组件的顶层作用域调用，不能嵌套在事件回调、条件判断、循环这类代码块里。你把useEffect放在onEnter这个点击回调里，违反了Hook规则，所以会报错。

清空数组根本不需要套useEffect，直接在onEnter里调用setTaken([])就可以了，这才是正确的写法。

补充：你的状态更新逻辑优化 #

你原来添加元素的逻辑是：

if (!taken.includes(letterPos)) {
  setTaken((prev) => [...prev, letterPos]);
}

这里用函数式更新是对的，因为依赖了旧状态taken，函数式更新能确保拿到最新的前序状态，避免因为异步更新导致的状态不一致问题，这个写法可以保留。

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