React JS：API 调用成功后获取上下文数据

我一直在获取上下文数据。

我有一个上下文和一个使用其数据的组件。

我需要在我的组件中获取 API 调用成功时上下文变量的更新数据。

那么我该怎么做呢？ 这是我尝试过的。

上下文.js

import React, { useState, createContext,useEffect } from 'react';
import {getData} from './actionMethods';

const NewContext = createContext();

function newContextProvider(props) {

 const [dataValue, setData] = useState([])

    useEffect(() => {
        const fetchMyData = async () => {
            const dataValue  = await getData(); // this is an API call

            setData(dataValue)
        };

        fetchMyData();
    }, []);

     
     return (
        <NewContext.Provider
            value={{
                state: {
                    dataValue
                },
                actions: {
                    
                }
            }}
        >
            {props.children}
        </NewContext.Provider>
    );
}


const newContextConsumer = newContext.Consumer;

export { newContextProvider, newContextConsumer, newGridContext };

myComponent.js

import React, { useState, useContext } from 'react'

import context from './context'


import deleteAPI from './actionMethods'

function myComponent(props) {

const id= 10

const {state,actions} = useContext(context)
  
  deleteAPI(id).then(res => {
    if (res){
      // what should I write here to get the updated Data from the context which will call an API to get the updated data.    
    }
  })
  
  
}

任何帮助都会很棒。

谢谢。

作为一个通用示例，一种选择是当应用程序加载到前端时从服务器获取数据。从那里您可以发送修改服务器数据的请求，同时更新本地版本。就像是：

1. 获取数据并将其保存到本地存储：[{id: 0, name: 'first'},{id: 1, name: 'second'}]
2. 向服务器发送请求修改数据。例如删除一个项目。id: 0
3. 一旦服务器响应确认操作成功，您就可以修改本地存储中的数据。[{id: 1, name: 'second'}]

您可以使用 Redux 存储或 React Context 来处理数据。例如，使用上下文：

export const ItemsContext = createContext([]);

export const ItemsContextProvider = props => {
    const [items, setItems] = useState([]);

    const deleteItem = id => {
        deleteItemsAxios(id).then(() => {
            setItems(items => items.filter(item => item.id !== id));
        });
    };

    useEffect(() => {
        const fetchItems = async () => {
            const items_fetched = await fetchItemsAxios();

            if (items_fetched) {
                setItems(items_fetched);
            } else {
                // Something went wrong
            }
        };

        fetchItems();
    }, []);

    return (
        <ItemsContext.Provider
            value={{
                items,
                deleteItem
            }}
        >
            {props.children}
        </ItemsContext.Provider>
    );
};

我们定义一个将管理数据获取的组件。数据项位于状态内。当组件安装时，我们获取项目并将它们保存在状态中。如果我们想删除一个项目，我们首先调用相应的获取函数。一旦完成，如果成功，我们会更新状态并删除该项目。我们使用 React Context 来传递items数据，以及deleteItem功能，任何需要它们的组件。

如果您需要更多解释，请告诉我。