2

我正在使用 react-spring 为基于 @reach/dialog 的 Modal 设置动画。模态可以有任何孩子。在孩子们中，我正在根据一些道具获取一些数据。

问题是在打开模式时进行了两次获取调用。我认为这可能与我如何管理状态有关，这会导致重新渲染。

我试过在模态框内记忆孩子，但没有奏效，所以我认为问题出在模态框组件之外。

这是接近我的代码的东西以及它是如何工作的 https://codesandbox.io/s/loving-liskov-1xouh

编辑：我已经知道，如果我删除 react-spring 动画，则不会发生双重渲染，但我想尝试保持动画完整。

您认为您可以帮助我确定错误在哪里吗？（也非常感谢一些关于使用钩子的良好实践的提示）。

4

3 回答 3

1

问题是，在动画结束时，AnotherComponent 会重新挂载。我读过关于 react-spring 的类似问题。一种方法是，您将状态从 AnotherComponent 提升到 index.js。这样状态不会在重新挂载时丢失，并且您可以防止重新获取数据。

const AnotherComponent = ({ url, todo, setTodo }) => {
  useEffect(() => {
    if (todo.length === 0) {
      axios.get(url).then(res => setTodo(res.data));
    }
  });
....
}

这是我的版本：https ://codesandbox.io/s/quiet-pond-idyee

于 2019-05-29T20:29:18.857 回答
1

它渲染了三次，因为你的返回组件有，transitions.map因为你在里面有三个项目

    from: { opacity: 0 }
    enter: { opacity: 1 }
    leave: { opacity: 0 }

当the为真{children}时，被调用了两次，isOpen您只需删除from: { opacity: 0 }and即可解决问题leave: { opacity: 0 }

所以改变你的 modal.js =>transitions

  const transitions = useTransition(isOpen, null, {    
    enter: { opacity: 1 }
  });
于 2019-05-29T17:13:04.940 回答
1

我检查了一下，因为动画完成时模态组件中的动画，它被渲染了两次，当我注释掉负责动画的片段时，模态被第二次渲染，模态只渲染一次。

 const Modal = ({ children, toggle, isOpen }) => {
  // const transitions = useTransition(isOpen, null, {
  //   from: { opacity: 0 },
  //   enter: { opacity: 1 },
  //   leave: { opacity: 0 }
  // });
  console.log("render");
  const AnimatedDialogOverlay = animated(DialogOverlay);
  // return transitions.map(
  //   ({ item, key, props }) =>
  //     item && (
    return (
        <AnimatedDialogOverlay isOpen={isOpen}>
          <DialogContent>
            <div
              style={{
                display: `flex`,
                width: `100%`,
                alignItems: `center`,
                justifyContent: `space-between`
              }}
            >
              <h2 style={{ margin: `4px 0` }}>Modal Title</h2>
              <button onClick={toggle}>Close</button>
            </div>
            {children}
          </DialogContent>
        </AnimatedDialogOverlay>
    );
  //     )
  // );
};
于 2019-05-29T16:48:47.253 回答