开发俄罗斯方块时onKeyDown触发x值双倍增减的问题求助

你遇到的x值每次增减2而非预期1的问题，核心原因是违反了React状态不可变的原则，直接修改了state对象的属性：

在usePlayer钩子的updatePlayerPosition函数中，你使用了previous.position.x += x这种写法——这不仅会返回修改后的值，还会直接改变previous这个当前state的引用对象。React依赖状态的不可变更新来追踪变化，这种突变操作会导致状态计算异常，比如多次触发更新时叠加计算错误。

另外，也可以检查是否存在事件重复绑定的情况，但从你提供的代码来看，最直接的问题就是state更新方式错误。

修复updatePlayerPosition中的状态更新逻辑，使用不可变的方式计算新位置：

修改usePlayer钩子中的updatePlayerPosition函数：

const updatePlayerPosition = ({x, y, collided,}: {x: number; y: number; collided: boolean;}): void => {
  setPlayer((previous) => ({
    ...previous,
    position: {
      // 替换成加法操作，不直接修改previous对象
      x: previous.position.x + x,
      y: previous.position.y + y,
    },
    collided,
  }));
};

如果修复后问题仍然存在，可以排查以下两点：

• 确认StyledTetrisBoard组件内部没有重复绑定onKeyDown事件
• 检查是否有父组件或其他逻辑重复调用了updatePlayerPosition

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