Javascript 使用异步API调用在createContext上设置数据

我是React和Next.JS的初学者。我正在做一个应用程序，我正在使用useContext钩子。所以，我有这个代码

import { createContext } from 'react';

let data;
fetch(API_URL)
  .then(response => response.json())
  .then(result => {
    data = result.data;
  })
  .catch(error);
  
export const UserContext = createContext(data);

问题是，当创建上下文时，“data”的值为null。是否有一种异步执行此操作的方法

像这样的东西应该可以做到：

从'react'导入{useState，useffect，createContext}；
const UserContext=（{children}）=>{
const[data，setData]=useState（）；
const Ctx=createContext（）；
useffect（（）=>{
获取（API_URL）
.then（response=>response.json（））
。然后（结果=>{
setData（result.data）；
})
.捕捉（错误）；
}, []};
返回(
{儿童}
);
}

没有测试它，但这应该给你一个想法；你可以像这样使用它

<UserContext>
  // your code here
</UserContext>

//你的代码在这里

更好的方法是在自定义挂钩中提取获取逻辑：

const data=useUserData（）；//在此处获取逻辑
//你的代码在这里
但既然你是React的初学者，我就简单一点

<UserContext>
  // your code here
</UserContext>

const data = useUserData(); // fetch logic here
<UserContext value={data}>
  // your code here
</UserContext>
 

 but since you are a beginner in React, I would keep it simple