Question

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

问题是打开模态时两次进行了提取调用。我认为这可能与我管理国家的方式有关，这导致了重新渲染。

我试图为模态中的孩子们做记忆，但是它没有用，所以我认为问题出在模态组件之外。

这与我的代码及其工作原理非常接近https://codesandbox.io/s/loving-liskov-1xouh

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

您认为您可以帮助我确定错误在哪里吗？（此外，对于使用钩子的良好实践的一些技巧也受到高度赞赏）。

Answer 1

我检查完动画后，由于Modal组件中的动画而将其渲染了两次，当我注释掉负责动画的片段时，第二次渲染了modal，Modal仅渲染了一次。

 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}为true时，两次调用isOpen 您只需删除from: { opacity: 0 }和leave: { opacity: 0 }

即可解决此问题

因此更改您的modal.js => transitions

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

Answer 3

问题是，在动画结尾处将重新安装AnotherComponent。我读过关于反应弹簧的类似问题。一种方法是，将状态从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

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

3 个答案: