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

IT技术 reactjs react-hooks react-context
2021-05-18 02:09:27

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

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

我需要在我的组件中获取有关 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 };

我的组件.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个回答

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

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

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

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

其它你可能感兴趣的问题
上一篇为什么我的 Anet A8 上的电源保险丝烧断了？ 下一篇黑色长丝更脆吗？