重构 += 表达式

Question

代码

 const updatePlayerPosition = ({ x, y, collided }) => {
    setPlayer((prev) => ({
      ...prev,
      pos: { x: (prev.position.x += x), y: (prev.position.y += y) },
      collided,
    }));
  };

问题

EsLint 签署这一行

  pos: { x: (prev.position.x += x), y: (prev.position.y += y) },

作为"No return error"和this is the link的解释。

我尝试阅读它并尝试应用 Eslint 的解决方案，但我无法编译它。

问题

如何重构行

  pos: { x: (prev.position.x += x), y: (prev.position.y += y) },

没有错误？

Answer 1

假设当前代码按预期工作，并且您确实想要改变prev.position，问题只是 linter 警告，问题是您有被解析为表达式的赋值，这可能会使代码更难阅读。通常，将赋值作为独立语句代替：

const updatePlayerPosition = ({ x, y, collided }) => {
  setPlayer((prev) => {
    prev.position.x += x;
    prev.position.y += y;
    return {
      ...prev,
      pos: { x: prev.position.x, y: prev.position.y },
      collided,
    };
  });
};

Answer 2

我相信您想通过将 x 和 y 值添加到之前的位置来更新玩家的位置。 prev.position.x += x，这是在改变 prev 对象，但你只需要 return 一个更新的 pos 和新的 x 和 y 值。

方法不对:

pos: { x: (prev.position.x += x), y: (prev.position.y += y) },

正确的方法:

pos: { x: (prev.position.x + x), y: (prev.position.y + y) },

重构 += 表达式

Refactor += expression

javascript

object

operators