reactjs - 如何在 React 启动时仅初始化一次上下文

Question

我对 React 比较陌生。我有一组数据需要在启动时从服务器检索一次且仅一次。然后数据显示在我的 Footer 组件中，该组件位于 App.js 中。我认为 useContext() 可能是最好的方法，但我不太明白。

初始化数据(一个对象)的代码是这样的:

 axios.get('/url/to/get/data')
            .then((response) => {
                const myData = response.data.mydata;
                setMyData({ key1: myData.field1, key2: myData.field2, key3: myData.field3 });

            });

现在，setMyData 是一个状态，它设置对象的值(它由 Axios 调用返回的各种字段构成。

如何用这个值初始化上下文。

然后我有一个 Footer 组件，所以我想我想做这样的事情

<context.Provider>
   <Footer>
</context.Provider>

如果 useContext 不是可行的方法，我愿意接受这个想法。本质上，寻找一个初始化一次的单例，然后页脚组件可以为每个页面检索和呈现它。

Answer 1

您应该定义您的上下文，并在一次性 useEffect 中初始化它。加载后，所有子级都可以使用 useContext

访问上下文

这里的“技巧”是使用一个没有依赖的useEffect，让它只运行一次(只要它的父级没有重新渲染)

在这个例子中，我在直接子节点(Main)上使用上下文，但它可以在更深层次上使用。

// initialize the context
const MyContext = React.createContext();

function App() {
  const [myData, setMyData] = React.useState(null);

  // Load your data once
  React.useEffect(() => {
    axios.get('/url/to/get/data')
            .then((response) => {
                const myData = response.data.mydata;
                setMyData({ key1: myData.field1, key2: myData.field2, key3: myData.field3 });
            });
  }, []);

  // Render the Provider and the app tree
  return (
    <MyContext.Provider value={myData}>
      <Main />
    </MyContext.Provider>
  );
}

// Consumer
function Main() {
  const myData = useContext(MyContext);
  if (!myData) {
    return <div>Loading...</div>;
  }

  return (
    <div>{myData}</div>
  );
}