React中Player组件props未随state更新问题排查求助

核心问题：状态更新方式错误 #

你在更新playerCoordinate状态时，直接修改了原状态对象的属性：

setPlayerCoordinate((prev) => {
  prev.x -= 1;
  return prev;
})

React的状态更新依赖引用变化来检测状态变更，直接修改原对象（prev是原状态的引用）并不会创建新的对象，React会认为状态没有发生变化，因此不会触发组件重新渲染，Player组件的props自然不会更新。

修复步骤 #

1. 正确更新状态对象 #

修改setPlayerCoordinate的逻辑，返回一个新的对象，而不是修改原对象：

setPlayerCoordinate((prev) => {
  return { ...prev, x: prev.x - 1 };
})

使用扩展运算符...prev复制原对象的所有属性，再覆盖x的值，这样就创建了一个新的对象，React能检测到状态变化并触发重新渲染。

2. 修复事件监听的内存泄漏与重复绑定问题 #

你的useEffect依赖了playerCoordinate，每次状态更新都会重新添加一次keydown事件监听，导致多个监听同时存在，还可能造成内存泄漏。需要：

• 使用useCallback包裹handleUserKeyPress，避免每次render都创建新函数
• 在useEffect的清理函数中移除事件监听
• 调整useEffect的依赖项

修改后的Screen.js代码：

import { useState, useEffect, useCallback } from 'react'
import styles from './ScreenStyles'

import ScriptDisplayer from '../ScriptDisplayer/ScriptDisplayer';
import Player from '../Player/Player'

function Screen() {
  const [playerCoordinate, setPlayerCoordinate] = useState({x: 641, y: 258})

  // 用useCallback包裹，避免每次render重建函数
  const handleUserKeyPress = useCallback((event) => {
    if (event.code === 'ArrowLeft') {
      setPlayerCoordinate((prev) => {
        return { ...prev, x: prev.x - 1 };
      })
    }
  }, []) // 依赖为空，因为内部只用到了setPlayerCoordinate（React保证其引用稳定）

  useEffect(() => {
    window.addEventListener('keydown', handleUserKeyPress)
    // 清理函数：组件卸载或依赖变化时移除监听
    return () => {
      window.removeEventListener('keydown', handleUserKeyPress)
    }
  }, [handleUserKeyPress]) // 依赖是handleUserKeyPress，确保其更新时重新绑定

  return (
  <>
    <div id='screen' style={styles.screen}>
      <ScriptDisplayer />
      <Player x={playerCoordinate.x} y={playerCoordinate.y} />
    </div>
  </>
  ); 
}

export default Screen

验证修改 #

修改后，按下左箭头键时，playerCoordinate会生成新的对象，React检测到状态变化后会重新渲染Screen组件，Player组件的x、y props会随之更新，控制台的playerX、playerY日志也会显示最新值。

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