React中useEffect执行后state自动回退初始状态问题排查

问题原因 #

1. 闭包陷阱导致读取旧状态 #

handleClick函数在组件初始渲染时创建，会捕获当时的movement状态值。如果未用useCallback包裹，当组件因状态更新重新渲染时，旧版本的handleClick仍会被事件绑定（比如canvas的点击事件）引用，导致每次调用时读取的都是初始渲染时的movement（active: false）。

2. 直接修改引用类型状态导致的状态不一致 #

在moveCharacter函数中，let newTeam = playerTeam仅复制了对象引用，未创建新对象。直接修改newTeam属性后调用setPlayerTeam(newTeam)，React通过浅比较检测不到状态变化，会引发状态更新异常或不一致。

解决方案 #

1. 用useCallback包裹处理函数，捕获最新状态 #

通过useCallback包裹事件处理函数，并添加正确的依赖项，确保函数在依赖变化时重新创建，从而获取最新的状态值。

2. 更新引用类型状态时创建新对象 #

修改playerTeam时，必须创建新的对象副本，避免直接修改原状态引用，确保React能检测到状态变化。

修改后的代码片段 #

状态声明与回调函数包裹

import { useState, useEffect, useCallback } from 'react';

const [playerTeam, setPlayerTeam] = useState({});
const [movement, setMovement] = useState({ active: false, character: null });

// 用useCallback包裹handleClick，依赖movement和playerTeam
const handleClick = useCallback((canvas, e) => {
  console.log(movement);
  let rect = canvas.getBoundingClientRect();
  let x = e.clientX - rect.left;
  let y = e.clientY - rect.top;

  if (movement.active) {
    moveCharacter(x, y);
  } else {
    for (const [key, value] of Object.entries(playerTeam)) {
      if (
        x >= playerTeam[key].x &&
        x <= playerTeam[key].x + 47 &&
        y >= playerTeam[key].y &&
        y <= playerTeam[key].y + 47
      ) {
        console.log("Batman!");
        const enterMovement = {
          active: true,
          character: playerTeam[key].name,
        };
        setMovement(enterMovement);
        break;
      }
    }
  }
}, [movement, playerTeam]);

// 用useCallback包裹moveCharacter，依赖movement和playerTeam
const moveCharacter = useCallback((x, y) => {
  console.log("here");
  // 创建playerTeam的浅拷贝，若对象嵌套较深需用深拷贝
  let newTeam = { ...playerTeam };
  // 对目标角色创建新副本，避免直接修改原对象
  newTeam[movement.character] = {
    ...newTeam[movement.character],
    x: x - (x % 48),
    y: y - (y % 48)
  };
  setPlayerTeam(newTeam);
  setMovement({ active: false, character: null });
}, [movement, playerTeam]);

事件绑定优化

在useEffect中处理canvas的点击事件绑定，确保依赖变化时重新绑定最新的handleClick：

useEffect(() => {
  const canvas = canvasReference.current;
  if (canvas) {
    const handleCanvasClick = (e) => handleClick(canvas, e);
    canvas.addEventListener('click', handleCanvasClick);
    return () => {
      canvas.removeEventListener('click', handleCanvasClick);
    };
  }
}, [handleClick]);

额外说明 #

• 若playerTeam是嵌套较深的对象，浅拷贝（...扩展运算符）无法覆盖嵌套属性，需使用深拷贝（如JSON.parse(JSON.stringify(playerTeam))或专门的深拷贝工具）。
• 避免在useEffect中随意修改无关状态，确保所有状态更新的依赖项正确。

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