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

Posted 2023-04-14

【中文标题】React JS：在 API 调用成功后获取上下文数据

【英文标题】：React JS: Get Context Data After getting success on API Call

【发布时间】：2020-04-09 20:10:10

【问题描述】：

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

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

我需要在我的组件中获取 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.    
    
  )
  
  

任何帮助都会很棒。

谢谢。

【问题讨论】：

你的 context 只会调用一次，因为 context 的 useEffect 中没有 deps 数组。您能否解释一下 componentDidMount 上的工作流程，您需要调用一个 api 并将该数据填充到您的组件中，api 调用将在上下文中发生，您需要获取该数据并在组件中呈现。这就是你要找的东西

完全正确.. 所以基本上我有 10 个存储在 Context 变量中的列表。当我从我的组件调用删除列表 API 时，我应该通过在删除 API 调用成功时调用 API 来获取 9 个列表（更新的列表）数据。那我该怎么做呢？

所以我会再回忆一次，最初它会显示 10 个列表，然后单击每个列表附带的 del 按钮，它将从上下文中删除该项目并显示 9 个列表项。因此上下文组件将第一次调用数据并获取 10 个项目并在子组件中渲染 10 个项目，单击 del 按钮它将通过从上下文中找到 id 来删除，剩下的 9 个列表项将被渲染。我说的对吗！

yes.. 所以基本上当页面加载时.. API 将从上下文中调用，这将获取列表，比如说 10。所以在删除 1 个列表后，将再次调用 API 来获取最新列表

我认为 alvaro 已经给出了解决方案，如果您需要进一步了解，请告诉我

【参考方案1】：

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

获取数据并保存到本地存储：[id: 0, name: 'first',id: 1, name: 'second'] 修改向服务器发送请求的数据。例如删除一个项目。 id: 0 一旦服务器响应确认操作成功，您就可以在本地存储中修改该数据。 [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 函数传递给任何需要它们的组件。

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

【讨论】：

感谢您的回答。我可以使用 dep array 做到这一点吗？我的意思是比较我的清单的使用效果。如果延迟，则调用 API。像这样。

不客气。在这种方法中，服务器不会告诉您其数据何时被修改。您需要对其进行修改，然后再次获取它。您可以这样做，但理论上没有必要，因为第二次返回的数据将是您已经拥有的数据。例如：您获取并保存[item1,item2,item3]，发送删除请求`item2, fetch again and receive [item1,item3]`。最后一次获取是不必要的。我说清楚了吗？

是否可以比较以前的列表和当前列表，这样我就不需要在上下文本身编写CRUD操作函数。因为我只使用上下文来获取列表。那么有可能吗？

对不起，我没有正确理解。你想在哪里进行这些 CRUD 操作？如何在不修改列表的情况下将列表更改为以前的当前列表？

所以基本上我的组件中有我的 CRUD 操作调用 API。我展示了我从上下文中获得的列表。因此，每当我从组件中删除任何列表时，我只想从我在上下文中使用的 API 中获取最新列表。这就是我想要的。