React TS拖拽交互状态异常：更新后仍使用旧状态求助

一、为什么console.log(state)显示旧值，但UI已更新？ #

• React的setState是异步批量更新机制：调用setBoard后，React不会立刻修改state，而是将更新任务加入队列，等当前渲染周期结束后再批量处理。
• 你在clearBoard里的console.log(board)，拿到的是当前函数闭包中捕获的旧state值——此时state还没完成更新，只有等组件重新渲染后，新的state才会被后续的函数闭包捕获（比如依赖board的useEffect）。
• 要在更新后立刻获取新state，可以用setState的回调参数：

  function updateBoard(board: UnitHex[][]){
    setBoard(board, () => {
      console.log(board); // 这里能拿到更新后的新值
    });
    // some side actions 
  }
  

二、为什么拖拽交互时会使用旧状态？ #

这是典型的闭包陷阱结合事件监听器未清理导致的问题：

1. 闭包捕获旧值：你的drop函数是在组件渲染时创建的，它会捕获当前渲染周期的board值。当board更新后，组件重新渲染会创建新的drop函数，但旧的drop函数因为事件监听器没被移除，依然绑定在DOM元素上。
2. 未清理旧监听器：你在useEffect里每次board更新时都添加新的事件监听器，但没有移除之前的监听器。这会导致DOM元素上绑定了多个drop监听器，其中旧的监听器引用的还是旧的board值，触发时就会使用旧状态。
3. 引用类型的错误赋值：你在drop里直接var tempBoard: UnitHex[][] = board;，这是引用赋值，修改tempBoard会直接篡改原state（数组是引用类型），违反了React state不可变的原则，会导致后续状态更新异常。

三、修复方案 #

1. 清理事件监听器，避免闭包陷阱 #

将事件处理函数定义在useEffect内部，并添加清理函数移除旧监听器，确保每次board更新后，DOM上绑定的都是最新的处理函数：

useEffect(() => {
  // 定义内部处理函数，每次渲染时捕获最新的board
  const handleDragStart = (event: any) => {
    event.dataTransfer.setData("text", event.target.id);
  };

  const handleDragOver = (event: any) => {
    event.preventDefault();
  };

  const handleDrop = (event: any) => {
    event.preventDefault();
    // 深拷贝state，避免直接修改原引用
    const tempBoard = JSON.parse(JSON.stringify(board)) as UnitHex[][];
    console.log("inside drop fn", tempBoard);

    // drop logic
    
    updateBoard(tempBoard);
    event.stopImmediatePropagation();
  };

  // 添加监听器
  droppableElements.forEach((element) => {
    element.addEventListener("dragover", handleDragOver);
    element.addEventListener("drop", handleDrop);
  });

  draggableElements.forEach((element) => {
    element.addEventListener("dragstart", handleDragStart);
  });

  // 清理函数：组件卸载或board更新时移除旧监听器
  return () => {
    droppableElements.forEach((element) => {
      element.removeEventListener("dragover", handleDragOver);
      element.removeEventListener("drop", handleDrop);
    });

    draggableElements.forEach((element) => {
      element.removeEventListener("dragstart", handleDragStart);
    });
  };
}, [board]);

2. 遵守state不可变原则 #

处理引用类型state时，必须创建新的引用触发更新：

• 一维数组可以用扩展运算符：const tempBoard = [...board];
• 嵌套结构建议用深拷贝（如JSON.parse(JSON.stringify())，或使用lodash.clonedeep等库），避免修改原state。

3. 正确获取更新后的state #

除了用setState的回调，也可以通过依赖board的useEffect来监听状态变化：

useEffect(() => {
  console.log("board updated:", board);
}, [board]);

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