UseContext 反应钩子

【问题标题】：UseContext React hooksUseContext 反应钩子
【发布时间】：2021-01-09 13:42:16
【问题描述】：

如何使用 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
  }
}

【问题讨论】：

标签： javascript reactjs typescript

【解决方案1】：

首先，为自己创建一个上下文：

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

代码未经测试，应被视为伪代码。

【讨论】：