React中useState调用setState无法多次更新状态问题咨询

我尝试使用对象初始化React的useState Hook，随后通过点击事件监听器更新状态，但状态仅能更新一次。控制台日志显示每次点击都会打印"BEGIN"，player的x值无法随每次点击正常更新。

相关代码如下：

function App() {
  useEffect(() => {
    const func = (e) => {
      console.log('click')
      handleKeyPress(10, 0)
    }
    document.addEventListener('click', func)
    return () => document.removeEventListener('click', func)
  }, [])

  console.log('BEGIN')
  const [player, setPlayer] = useState({
    position: { x: 100, y: 100 },
    direction: 'right',
  })

  console.log(player.position)

  const handleKeyPress = (xChange, yChange) => {

    const newX = player.position.x + xChange
    const newY = player.position.y + yChange
    let newDirection = player.direction

    if (xChange > 0) {
      newDirection = 'right'
    }
    if (xChange < 0) {
      newDirection = 'left'
    }
    console.log('------->', player.position)
    setPlayer((prev) => ({
      ...prev,
      direction: newDirection,
      position: { x: newX, y: newY },
    }))
  }

  return (
    <GameContainer className="game-container">
      <Character positionx={player.position.x} positiony={player.position.y} />
    </GameContainer>
  )
}

export default App

问题原因 #

1. 闭包陷阱：useEffect的依赖数组为空，导致内部的func函数捕获的是组件第一次渲染时的handleKeyPress和player状态。每次点击调用的都是初始版本的handleKeyPress，其中player永远是初始值{position: {x:100,y:100}, direction:'right'}，所以计算出的newX始终是110，每次更新都会把x重置为110，看起来只更新了一次。
2. 函数式更新未正确利用prev状态：虽然setPlayer用了函数式更新，但newX、newY、newDirection都是基于闭包中的旧player计算的，没有利用参数prev的最新状态，导致更新逻辑失效。

解决方案 #

方案一：基于prev状态计算新值（最简修复） #

修改handleKeyPress，完全通过setPlayer的函数式更新参数prev来计算新状态，避免依赖闭包中的旧值：

const handleKeyPress = (xChange, yChange) => {
  setPlayer((prev) => {
    const newX = prev.position.x + xChange;
    const newY = prev.position.y + yChange;
    let newDirection = prev.direction;

    if (xChange > 0) {
      newDirection = 'right';
    }
    if (xChange < 0) {
      newDirection = 'left';
    }
    return {
      ...prev,
      direction: newDirection,
      position: { x: newX, y: newY },
    };
  });
};

这样无论handleKeyPress是哪个版本，都会基于最新的状态进行计算，保证每次更新都是正确的。

方案二：修复useEffect依赖+useCallback优化（更规范） #

如果需要保证事件监听器绑定的是最新的handleKeyPress，可以用useCallback包裹函数，并更新useEffect的依赖数组：

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

function App() {
  const [player, setPlayer] = useState({
    position: { x: 100, y: 100 },
    direction: 'right',
  });

  // 用useCallback包裹，避免每次渲染创建新函数
  const handleKeyPress = useCallback((xChange, yChange) => {
    setPlayer((prev) => {
      const newX = prev.position.x + xChange;
      const newY = prev.position.y + yChange;
      let newDirection = prev.direction;

      if (xChange > 0) {
        newDirection = 'right';
      }
      if (xChange < 0) {
        newDirection = 'left';
      }
      return {
        ...prev,
        direction: newDirection,
        position: { x: newX, y: newY },
      };
    });
  }, []); // 依赖为空，因为函数内部仅使用prev状态

  useEffect(() => {
    const func = (e) => {
      console.log('click');
      handleKeyPress(10, 0);
    };
    document.addEventListener('click', func);
    return () => document.removeEventListener('click', func);
  }, [handleKeyPress]); // 加入handleKeyPress作为依赖

  console.log('BEGIN');
  console.log(player.position);

  return (
    <GameContainer className="game-container">
      <Character positionx={player.position.x} positiony={player.position.y} />
    </GameContainer>
  );
}

export default App;

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