如何在 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 调用返回的各种字段构成。

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

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

<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>
  );
}