React Context : 从 API 获取数据并在 React 组件中发生某些事件时调用 API

Posted 2023-04-14

【中文标题】React Context : 从 API 获取数据并在 React 组件中发生某些事件时调用 API

【英文标题】：React Context : Get Data from API and call API whenever some events happens in React Component

【发布时间】：2020-04-09 14:03:39

【问题描述】：

我是 React Context 的新手。 我需要在反应上下文中调用 API 以在整个反应应用程序中使用其数据。同样的 API 也需要在 react 应用的各个组件上进行一些 CRUD 操作。

现在我将 API 数据存储在我不想存储的 redux 中。

这是我尝试过的..

context.js 文件

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

const NewContext = createContext();

function newContextProvider(props) 
    useEffect(async () => 
         const dataValue  = await getData()

         console.log("Data " , dataValue)    
     , [])
     
     return (
        <NewContext.Provider
            value=
                state: 
                    
                ,
                actions: 
                    
                
            
        >
            props.children
        </NewContext.Provider>
    );



const newContextConsumer = newContext.Consumer;

export  newContextProvider, newContextConsumer, newGridContext ;

actionMethods.js

export function getData() 
    let config = getInstance('GET', `$prefix/xyz/list`)
    return axios(config).then(res => res.data).catch(err => 
      console.log(err)
    )
  

当执行任何 CRUD 操作时，我需要从 context.js 文件中调用 API 以从 API 中获取数据并存储在上下文中。

任何帮助都会很棒。

谢谢。

【参考方案1】：

首先我们创建上下文并传递一个初始值。

为了获取数据并跟踪返回值，我们在组件内部创建了一个状态。该组件将管理获取的数据并将其传递给 Context Provider。

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

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

要在组件中使用此上下文，我们使用useContext 挂钩。请记住，这个组件需要被我们刚刚创建的 Provider 包裹起来。

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 //...
;

如果有什么不清楚的地方请告诉我。

【讨论】：

非常感谢您抽出宝贵时间。当我控制台 my_data 时，它说未定义。 API被完美调用。

@XperiaReno 没问题！看起来数据没有从getData 正确返回。我只是从问题中复制了这个，但让我们看看它得到了什么。你能准确记录它返回的内容吗？为此更改 useEffect 中的行：const dataValue = await getData(); console.log(dataValue);

是的。我得到了数据.. 原因是我们放了const dataValue。相反，我们必须输入const dataValue。最后一个问题。当我在执行 CRUD 操作后在其他组件中使用此上下文并获取更新的数据时。我怎样才能做到这一点 ？？类似 action.someMethod 来调用函数，在函数内部，API 将被自动调用并存储数据？

太好了，你可以解决它。我没有关注你的问题，action.someMethod 是什么意思？如果您询问使用 Context 的组件（例如上面的MyComponent）是否会在 Context 数据更改后重新渲染，答案是肯定的，它会在每次 Context Provider 中传递的值发生更改时重新渲染。

是的..所以我的意思是。我在 myComponent 中执行了名为 delete 列表的操作。所以在执行操作并从删除 API 获得响应后，我会得到更新的列表。因此，要调用调用 API 以获取更新列表的函数，我应该在删除 API 调用成功时编写什么代码，该调用将调用上下文中的函数，并将调用 API 以获取更新列表..