React Context API，Hook 加载两次。一次没有数据，一次有数据

Posted 2023-04-14

【中文标题】React Context API，Hook 加载两次。一次没有数据，一次有数据

【英文标题】：React Context API, Hook loading twice. Once without the data and once with the data

【发布时间】：2020-05-15 16:02:58

【问题描述】：

我正在构建一个带有烧瓶后端的内部反应应用程序，该后端将用户详细信息存储在烧瓶会话中。

我的烧瓶应用使用 ADAL 包来处理 Azure Active Directory 用户身份验证。

为了将用户详细信息输入我的 react 应用程序，我进行了 fetch 调用，并且可以毫无问题地获取数据。

在我的 react 应用程序中，我第一次尝试使用 Hooks、createContext、useContext、useState 和 UseState，由于某种原因，该应用程序看起来像是两次加载了我的标头挂钩。一次没有数据，一次有数据

我在这里创建了一个问题示例 https://codesandbox.io/s/new-react-context-api-ei92k 它在 console.log 中显示了 Header 触发了两次。

有没有办法避免这种情况？

【问题讨论】：

为避免这种情况，您的App 不应呈现AppSessionContext.Provider，直到您在您的状态中设置user。

那么这可能与我使用 useEffect 的方式有关吗？

我知道你已经明白了。专业提示：您不需要将返回值分配给变量，您可以在最终的return 之前只使用if (!loaded) return 'Loading' 。

感谢实现，我仍然感觉到它的渲染两次，但也许这就是它的方式

会渲染两次，自然效果是立即渲染，状态更新后再渲染。以前版本的 React 允许在初始渲染之前触发 loadUser，但为了支持渲染后效果，它已被弃用。

【参考方案1】：

这不是问题

const App = () => 
  const [user, setUser] = useState();

  useEffect(() => 
    loadProfile().then(user => setUser(user));
  , []);

  console.log(user); // you can log here 

您将获得两次用户对象，因为在第一次渲染中您没有用户数据，第二次您从 loadProfile() 获得用户数据。

【讨论】：

如果您有任何疑问，请告诉我