这是在 React 中填充 App Context 属性的正确方法吗？

Question

我已经成功地创建了两个上下文，一个用于我在 React 中使用功能组件和 React Hooks 构建的两个不同模块中的每一个。很明显，我将要构建的大多数/所有组件都需要共享数据。我不想对每个顶级组件进行 GET 调用，而是想重构这些公共数据并将其存储在 AppContext 中。这些数据在每个用户的会话中永远不会改变。

起初我尝试将所有填充代码直接放在AppContext 中，但由于上下文尚未初始化，所以没有奏效。于是我创建了一个名为InitAppData 的组件，并像这样将它包装在App.js 中：

<AppContext>
  <Router />
  <InitAppData />
</AppContext>

InitAppData 本身就很标准：

const InitAppData = () => {
  const { appStore,
          updateAppStore } = useContext(AppContext);

  // Populate the AWS Auth Token
  useGetAwsAuthToken();

  // Retrieve the Roles with a GET useFetch call
  const [{ data: rolesData, 
          status: rolesStatus,
          isLoading: rolesIsLoading, 
          isError: rolesIsError }] = useFetch(
    `${API_ROOT()}acct_mgmt/roles`,
    { }
  );

  // Process & populate the fetched Roles
  useEffect(() => {
    if (!rolesIsLoading && rolesStatus === 200) {
      appStore.roles = rolesData.roles;
    }
  }, [rolesIsLoading, rolesStatus]);

  // ... more population to go here ...

    return (null);
}

export default InitAppData;

一切似乎都被正确填充了。我意识到这可能有点不合常规，但它遵循我之前使用的相同模式，即将上下文与组件配对，后者与前者交互。

对大家对这种方法的想法感兴趣。如果有更好的做法，我总是有兴趣学习！

Answer 1

看看这是否有帮助。这就是我一直在做的事情，到目前为止一切正常。

沙盒链接：https://codesandbox.io/s/bold-currying-7fpyw

index.js

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router } from "react-router-dom";
import AppContext from "./AppContext";
import AllRoutes from "./AllRoutes";

function mockAPI() {
  return new Promise((resolve, reject) =>
    setTimeout(
      () =>
        resolve({
          propA: "This is some propA value",
          propB: "This is some propB value"
        }),
      1500
    )
  );
}

function App() {
  const [appState, setAppState] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    callMockAPI();
  }, []);

  async function callMockAPI() {
    const response = await mockAPI();
    setAppState(response);
    setLoading(false);
  }

  return (
    <AppContext.Provider value={appState}>
      {loading ? (
        <div>I am waiting for the API to respond...</div>
      ) : (
        <Router>
          <AllRoutes />
        </Router>
      )}
    </AppContext.Provider>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

AppContext.js

import React from "react";

const AppContext = React.createContext(null);

export default AppContext;

AllRoutes.js

import React from "react";
import { Route, Switch } from "react-router-dom";
import Home from "./Home";
import SomeComponent from "./SomeComponent";

function AllRoutes() {
  return (
    <Switch>
      <Route exact path="/" component={Home} />
      <Route exact path="/someComp" component={SomeComponent} />
    </Switch>
  );
}

export default AllRoutes;

结果：