useCallback中数组状态打印为空，组件与useEffect却正常更新，问题排查求助

定义了planners和workers两个数组状态，会通过映射为数组内每个对象渲染对应组件。同时编写了useCallback包裹的onKeyPress函数，期望按下Enter键时打印这两个数组状态。

目前组件可随数组状态变化正常渲染更新，useEffect也能打印出与组件渲染一致的正确数组状态，但onKeyPress函数每次按下Enter都打印空数组。该useCallback的依赖数组已包含workers和planners，请问问题出在哪里？

附代码：

const [planners, setPlanners] = useState([])
const [workers, setWorkers] = useState([])

const onKeyPress = useCallback((event) => {
    if (event.key == 'Enter') {
        console.log(workers, planners)
    }
}, [workers, planners])

useEffect(() => {
    console.log('*')
    console.log(workers)
    console.log(planners)
    console.log('*')
}, [workers, planners])

核心问题大概率是绑定onKeyPress的组件没有正确接收到更新后的回调函数，常见场景分两种：

1. 回调绑定到了未受控的目标上，没有随状态更新重新绑定 #

比如你把onKeyPress传给了某个不会随props变化重新渲染的第三方组件，或者直接通过addEventListener绑定到DOM后，没在状态变化时重新移除/添加事件监听。这会导致触发的始终是初始渲染时的旧回调——此时workers和planners都是空数组。

2. 状态更新方式错误，导致依赖数组的引用未变化 #

如果更新状态时直接修改原数组（比如workers.push(newItem)后调用setWorkers(workers)），这种操作不会改变数组的引用地址，useCallback因为依赖的引用没变化，不会生成新的回调函数，内部始终保留旧的状态值。

对应解决办法 #

针对场景1：

• 若绑定到原生DOM，用useEffect监听onKeyPress变化，动态绑定/解绑事件：

  useEffect(() => {
    const targetEl = document.getElementById('target-input');
    if (targetEl) {
      targetEl.addEventListener('keypress', onKeyPress);
      return () => targetEl.removeEventListener('keypress', onKeyPress);
    }
  }, [onKeyPress])
  

• 若绑定到第三方组件，检查组件是否通过memo或shouldComponentUpdate拦截了props更新，确保onKeyPress变化时组件能重新渲染。

针对场景2：

更新状态时必须返回新的数组引用，比如：

// 错误写法：直接修改原数组
workers.push(newWorker);
setWorkers(workers);

// 正确写法：生成新数组
setWorkers([...workers, newWorker]);
// 更安全的回调式更新（避免状态竞态）
setWorkers(prevWorkers => [...prevWorkers, newWorker]);

排查小技巧 #

可以在onKeyPress里临时打印依赖的状态长度，确认回调是否真的更新：

const onKeyPress = useCallback((event) => {
    console.log('当前回调的状态长度：', workers.length, planners.length);
    if (event.key == 'Enter') {
        console.log(workers, planners)
    }
}, [workers, planners])

如果打印的长度始终为0，说明回调根本没更新，优先排查上述两种场景。

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