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

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

目前，我正在redux中存储API数据，我不想存储这些数据

这是我试过的

context.js文件

import React，{useState，createContext，useffect}来自'React'；
从“/actionMethods”导入{getData}；
const NewContext=createContext（）；
函数newContextProvider（道具）{
useffect（异步（）=>{
const{dataValue}=await getData（）
console.log（“数据”，数据值）
}, [])
返回(
{props.children}
);
}
const newContextConsumer=newContext.Consumer；
导出{newContextProvider、newContextConsumer、newGridContext}首先，我们创建上下文并向其传递初始值

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

要在
useffect
中调用异步函数，我们需要将其包装并在
useffect
回调中调用它

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

如果有什么不清楚的地方，请告诉我。
非常感谢您抽出时间。当我控制台
my_data
时，它表示未定义。API的调用非常完美。@XperiaReno一点问题都没有！看起来数据没有从
getData
正确返回。我只是从问题中复制了这个，但是让我们看看它得到了什么。你能准确记录它返回的内容吗？为此更改useffect中的行：
const dataValue=await getData（）；console.log（数据值）是。我得到了数据。。原因是我们把
const{dataValue}
放在了一起。相反，我们必须放入
常量数据值
。最后一个问题。当我在执行CRUD操作后在其他组件中使用此上下文并获取更新的数据时。我该怎么做？？比如action.someMethod调用函数，在函数内部，API将被自动调用并存储数据？很好，你可以解决它。我不是在听你的问题，你所说的
action.someMethod
是什么意思？如果您询问使用上下文的组件（例如上面的
MyComponent
）是否会在上下文数据更改后重新呈现，答案是肯定的，它将在上下文提供程序中传递的值每次更改时重新呈现。是。。所以我的意思是。我在myComponent中执行了名为“删除列表”的操作。因此，在执行操作并从deleteapi获得响应后，我将获得更新的列表。因此，要调用调用API以获取更新列表的函数，我应该在delete API调用成功后编写哪些代码，这些代码将调用上下文中的函数，并调用API以获取更新列表。。
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 //...
};