如何使用 UseContext 使这个 const '' data '' 在我的整个项目中都可以访问?我正在尝试实施,但我不能。它不必与 UseContext 一起使用,这只是我研究的一种方式
import api from '../../services/api';
import React, {useContext} from 'react';
export default async function getItems() {
try {
const data = await api.get("/list-results");
return data;
} catch (error) {
return error
}
}
答案 0 :(得分:0)
首先,为自己创建一个上下文:
const MyContext = React.createContext(defaultValue);
然后调用您的 getItems() 并将结果存储在状态中并将其传递给您的上下文提供程序:
const [storedData, setStoredData] = useState<MyData | null>(null);
useEffect(() => {
getItems().then((data) => setStoredData(data));
}, []);
if (!storedData) return <div>Loading</div>;
return <MyContext.Provider value={}><MyApp/> </MyContext.Provider>;
最好在那里做更多的错误处理。
最后,在 MyApp 某处的组件中使用 useContext 获取您的上下文:
const data = useContext(MyContext);
代码未经测试,应视为伪代码。