React.useState更新数组时长度不符合预期的问题咨询

你遇到的是React Hooks中状态更新的异步性和闭包特性导致的问题：

1. useState更新是异步的：调用setCoordinates后，React不会立刻更新状态变量coordinates，而是将更新任务加入队列，等待合适时机触发组件重新渲染。所以在handleCanvasClick函数执行过程中，coordinates仍然是当前渲染周期的旧值。

2. 闭包捕获渲染快照：函数组件每次渲染时，handleCanvasClick都会重新创建，它捕获的是当前渲染周期里的coordinates状态快照。比如第二次点击画布时，handleCanvasClick里的coordinates其实是第一次点击后渲染得到的数组（长度为1），此时调用setCoordinates添加第二个点，但立刻打印的还是旧状态的长度1，新状态要等组件重新渲染后才会生效。

画布上能看到两个点，是因为你在点击时直接同步操作Canvas完成了绘制；但状态更新是异步的，所以打印的是旧状态的长度。

• 验证正确状态：用useEffect监听coordinates的变化，在effect中打印长度，就能获取到每次更新后的最新数值：

  useEffect(() => {
    console.log(coordinates.length); // 每次状态更新后打印最新长度
  }, [coordinates]);
  

• 确保状态更新的正确性：如果需要基于最新状态修改数组，使用函数式更新的方式，避免异步更新导致的状态覆盖：

  setCoordinates(prevCoordinates => [...prevCoordinates, newPoint]);
  

  这种方式会基于上一次的最新状态生成新数组，保证每次添加操作的准确性。

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