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) },

如“无返回错误”和解释的this is the link。

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

问题

我如何重构线路

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

没有错误？

Answer 1

假设当前代码按预期工作，并且您要做想要对prev.position进行突变，而问题仅是棉绒警告，那么问题在于您正在分配解析为表达式，可以说使代码更难阅读。通常，将分配作为独立的语句代替：

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，这是对上一个对象的突变，但是您只需要返回带有x和y新值的更新的pos。

错误的方式：

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

正确的方法：

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

重构+ =表达式

2 个答案: