reactjs - 在 React Context / Provider 中刷新 REST API

Question

我有一个 REST API，它为我的 React 应用程序中的多个页面提供我需要的数据集。因此，我设置了一个中心上下文。一切都在第一次加载时工作 - 我在页面之间移动并且上下文可用。

我的问题是我需要触发 REST API 以每 60 秒刷新一次数据，然后更新上下文并可供应用程序使用。

我试图遵循这一点，但我得到一个“错误：无效的钩子调用”。

这是我的代码的相关部分：

数据上下文.js

import React, { useState, createContext, useEffect, useContext } from 'react';

export const DataContext = createContext();

export const DataProvider = (props) => {
    
    const [data, setData] = useState([])
    
    const refreshData = async () => {
        // axios REST API Call
        setData(axiosresponse)
    }

    useEffect(() =>{
        refreshData()
    },[])
    
    return(
        <DataContext.Provider value={data}>
            {props.children}
        </DataContext.Provider>
    );
}

export function DataContextRefresh() {
    const context = useContext(DataContext);
    return context;
}

数据.js

import React, { useState, useEffect, useContext } from 'react';
import { DataContext, DataContextRefresh } from '../contexts/DashboardContext'

export default function Dashboard() {
    const data = useContext(DataContext)
    const [dataRefresh, setDataRefresh] = useState(null);

    useEffect(() => {

        const datarefresh = setInterval(() => DataContextRefresh(), 60000);
        setDataRefresh(datarefresh)

        return () => {
            clearInterval(datarefresh);
        }
    },[]);

    return(
        // elements using the data object
    )

}

标签： reactjsrestreact-hooksuse-context