Question

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

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

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

UseContext React 钩子

1 个答案: