模态组件在打开时呈现两次

Question

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

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

我尝试过在 modal 中记忆孩子，但没有成功，所以我认为问题出在 Modal 组件之外。

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

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

你认为你能帮我找出错误在哪里吗？ （也非常感谢一些关于使用钩子的良好实践的提示）。

Answer 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>
    );
  //     )
  // );
};

Answer 2

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

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

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

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

  const transitions = useTransition(isOpen, null, {    
    enter: { opacity: 1 }
  });

Answer 3

问题是，在动画结束时，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