在子组件呈现之前反应 useEffectin App.js

Question

在我的 React App.js 组件中，我执行以下代码：

function App() {
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(getAuthenticatedUser());
  }, []);

此代码通过会话从 API 获取当前经过身份验证的用户，并将填充 redux 存储。但是，在呈现 App 的子项之后，这段代码似乎运行。子组件使用状态变量，因为这个函数是在我的子组件渲染后执行的，所以它不起作用。我需要在 App.js 内渲染我的子组件之前调用此函数一次，我该如何实现？

Answer 1

你可以做一些类似三元的事情，当这些变量可用时只渲染那些 children，比如：

variables ? <Children/> : <Loading/>

Suspense 是一项很棒的实验性功能，如果您愿意成为早期采用者，可以帮助您解决这个问题！

Answer 2

你不能要求 React 延迟渲染，这不是 React 应该工作的方式（除非你正在使用像 Suspense 这样的实验性功能，但你可能应该先学习惯用的 React）。您通常只需告诉 React 根据当前 state/props 显示什么，React 会在发生变化时自动重新呈现。

所以如果你没有状态变量表明应用程序处于加载状态，你应该创建一个。毕竟，它当前是否正在加载直观地是应用程序当前“状态”的一部分，尤其是在连接速度较慢的情况下。

React useEffectin App.js before children component renders