如何仅在模态加载时获取数据

Question

我有一个 React 组件，比方说：app.js（父组件）有一个呈现 React bootstrap 模态组件的子组件。父组件使用像这样的反应钩子从 redux 获取数据：

  useEffect(() => { props.dispatch(actions.loadAll());},[]);

然后数据正在传递以显示在我的模态组件中。我正在使用 "show" 和 "onShow" 状态处理模态可见性。无论如何，我可以避免在我的父组件中加载数据并仅在模态组件加载并在那里显示数据后才加载吗？如有任何建议，我们将不胜感激。

Answer 1

您可以使用 useEffect 挂钩，具体取决于您的状态 show。

useEffect(() => { props.dispatch(actions.loadAll());},[show]);

当 show 状态改变时使用这段代码，useEffect 运行。因此，当您的模式打开时，您的数据就会被加载。

Answer 2

如s.hesam所说

仅当模式打开时使用条件加载数据。

如果模式是第一次打开，我添加条件 - fisrtTimeLoad

fisrtTimeLoad - 可以是存在状态的数据，你把它作为另一个条件。

useEffect(() => {
    if (show && fisrtTimeLoad) props.dispatch(actions.loadAll());
  }, [show, fisrtTimeLoad]);