React 上下文:从 API 获取数据，并在 React 组件中发生某些事件时调用 API

Question

我是 React Context 的新手。 我需要在反应上下文中调用 API，以在整个反应应用程序中使用它的数据。此外，还需要在 react 应用程序的各个组件上的某些 CRUD 操作上调用相同的 API。

现在，我将API数据存储在我不想存储的redux中。

这是我尝试过的..

上下文.js文件

import React, { useState, createContext,useEffect } from 'react';
import {getData} from './actionMethods';
const NewContext = createContext();
function newContextProvider(props) {
useEffect(async () => {
const {dataValue}  = await getData()
console.log("Data " , dataValue)    
}, [])

return (
<NewContext.Provider
value={{
state: {
},
actions: {
}
}}
>
{props.children}
</NewContext.Provider>
);
}
const newContextConsumer = newContext.Consumer;
export { newContextProvider, newContextConsumer, newGridContext };

操作方法.js

export function getData() {
let config = getInstance('GET', `${prefix}/xyz/list`)
return axios(config).then(res => res.data).catch(err => {
console.log(err)
})
}

当执行任何 CRUD 操作时，我需要从上下文.js文件中调用 API，从 API 获取数据并存储在上下文中。

任何帮助都会很棒。

谢谢。

Answer 1

首先，我们创建上下文并向其传递一个初始值。

为了获取数据并跟踪返回值，我们在组件内部创建了一个状态。此组件将管理获取的数据并将其传递到上下文提供程序中。

要在useEffect中调用异步函数，我们需要包装它并在回调useEffect中调用它。

export const NewContext = createContext({
my_data: {} // Initial value
});
export const NewContextProvider = props => {
const [my_data, setMyData] = useState({});
useEffect(() => {
const fetchMyData = async () => {
const { dataValue } = await getData();
if (dataValue) {
setMyData(dataValue);
} else {
// There was an error fetching the data
}
};
fetchMyData();
}, []);
return (
<NewContext.Provider
value={{
my_data
}}
>
{props.children}
</NewContext.Provider>
);
};

要在组件中使用此上下文，我们使用useContext钩子。请记住，此组件需要由我们刚刚创建的提供程序包装。

import React, { useContext } from "react";
import { NewContext } from "./NewContext"; // The file where the Context was created
export const MyComponent = props => {
const { my_data } = useContext(NewContext);
return //...
};

如果有什么不清楚的地方，请告诉我。