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

Question

我是 React Context 的新手。我需要在 React 上下文中调用 API，以便在整个 React 应用程序中使用其数据。此外，还需要对 React 应用程序的各个组件上的某些 CRUD 操作调用相同的 API。

现在我将 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 };

动作方法.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 并为其传递一个初始值。

为了获取数据并跟踪返回值，我们在组件内创建一个状态。该组件将管理获取的数据并将其传递到上下文提供程序中。

要在内部调用异步函数，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 //...
};

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