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

Question

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

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

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

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

context.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.    
    }
  })
  
  
}

任何帮助都会很棒。

谢谢。

Answer 1

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

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

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

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

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

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