Question

我想制作一个复杂的反应组件。请注意，该动画无法使用CSS完成。该组件具有有状态变量x，以便在x的每次更新时触发重新渲染。我希望能够将x的当前值更改为目标值，从而使组件平滑地重新呈现。这是我第一次尝试这样做的示意图：

export const MyComponent = (props: IProps) => {

  // Trigger 'animation' by toggling this boolean
  const [isXzero, setIsXzero] = useState(true);

  // I want x to vary between 0 and 500
  const [x, setX] = useState(0);

  useEffect(() => {
    if (!isXzero && x < 500) setX(x + 1);
    if (!!isXzero && x > 0) setX(x - 1);
  }, [isXzero, x]);

  return (<>...</>);
}

这“有效”，但是导致以下警告：

警告：超过最大更新深度。当组件在useEffect中调用setState，但是useEffect要么没有依赖项数组，或者其中一项依赖项发生了变化每个渲染。

我非常确定这会受到“每个渲染的依赖项更改之一”反模式的影响。是否有一种明智的React-ish方式来实现我要实现的目标（当我在目标值之间改变x时，可以相对平滑地进行重新渲染）？

如何在每次重新渲染的反应挂钩中改变有状态变量？

0 个答案: