检查useEffect中的哪个依赖项已被更新

Question

我有一个useEffect钩子：

useEffect(() => {
  setTop(t => t + (controller.position.y * tileSize))
  setLeft(l => l + (controller.position.x * tileSize))
}, [controller.position])

我希望它只在position改变的情况下进行加法。如果tileSize改变了，我只想让它做乘法。

我试着将其放入两个useEffect中，但随后得到了React Hook useEffect has missing dependencies警告：

useEffect(() => {
    setTop(t => t + (controller.position.y * spriteSize))
    setLeft(l => l + (controller.position.x * spriteSize))
}, [controller.position])

useEffect(() => {
    setTop((controller.position.y * spriteSize))
    setLeft((controller.position.x * spriteSize))
}, [spriteSize])

这个案子的最佳做法是什么？

编辑：

可复制的例子：

const [tileSize, setTileSize] = useState(0)
const controller = {
    position: {
        x: 0,
        y: 0
    }
}
useEffect(() => {
    setTop(t => t + (controller.position.y * tileSize))
    setLeft(l => l + (controller.position.x * tileSize))
}, [controller.position])

useEffect(() => {
    setTop((controller.position.y * tileSize))
    setLeft((controller.position.x * tileSize))
}, [tileSize])

const asdf = () => {
    setTileSize(150)
}

return (
    <div onClick={() => asdf()}>click me</div>
)

警告信息：

第31行: React useEffect缺少一个依赖项：'tileSize‘。要么包含它，要么删除依赖数组。如果“useState”需要“tileSize”的当前值-tileSize-钩子/详尽-deps，您还可以用useReducer替换多个tileSize变量。 第36行: React缺少依赖项：“控制项.位置.x”和“控制项.位置.y”。要么包含它们，要么删除依赖数组Reacti-钩子/详尽-deps第46行:不可访问的代码。不可及

Answer 1

有许多方法，您应该查看用例中最易读的一种方法。

1. 如警告所示，用useReducer替换

React缺少一个依赖项：“tileSize”。要么包含它，要么删除依赖数组。如果‘useState’需要当前的'tileSize‘值，也可以用useReducer替换多个setTop变量。(反应-钩/详尽-行动)

const STATE = {
  ADDITION: 'addition',
  MULTIPLICATION: 'multiplication'
};

function reducer(state, action) {
  switch (action.type) {
    case STATE.ADDITION:
      return {
        ...state,
        position: action.position,
        top: state.top + action.position * state.spriteSize
      };
    case STATE.MULTIPLICATION:
      return {
        ...state,
        spriteSize: action.spriteSize,
        top: state.position * action.spriteSize
      };
    default:
      throw new Error();
  }
}

function Controller({ position, spriteSize }) {
  const [state, dispatch] = useReducer(reducer, {
    top: 0,
    position,
    spriteSize
  });

  useEffect(() => {
    dispatch({ type: STATE.ADDITION, position });
  }, [position]);

  useEffect(() => {
    dispatch({ type: STATE.MULTIPLICATION, spriteSize });
  }, [spriteSize]);

  return <FlexBox>{state.top}</FlexBox>;
}

1. 您可以使用引用useRef并与旧值进行比较。
2. 如果你知道你在做什么，只需禁用棉布警告。

​

​