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

Question

我是 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 中获取数据并存储在上下文中。

任何帮助都会很棒。

谢谢。

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

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