Javascript 如何获取数据并存储在React上下文API中？

第一次使用上下文API，所以请容忍我

我有一个本地JSON文件，我正试图从中获取响应并将其放入上下文API中，以便在应用程序中全局使用

在本地运行应用程序时，会出现一个空白屏幕，页面似乎无法加载。页面处于无休止的循环中，所以我看不出它是否正在加载

代码沙盒

你知道我可以做些什么来将数据响应成功地引入上下文API吗

apiContext.js：

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

const APIContext = createContext();

function APIContextProvider({ children }) {
  // Initialize state
  const [data, setData] = useState([]);
  const [isLoading, setIsLoading] = useState(true);

  // Fetch data
  useEffect(() => {
    let url = "../db.json";
    axios
      .get(url)
      .then(function (response) {
        setData(response.data.machines);
        setIsLoading(false);
        console.log(response.data.machines);
      })
      .catch((error) => console.log(error));
  }, []);

  return (
    <APIContextProvider value={{ data }} loading={isLoading}>
      {children}
    </APIContextProvider>
  );
}

export default APIContextProvider;

// Create a hook to use the APIContext, this is a Kent C. Dodds pattern
export function useAPI() {
  const context = useContext(APIContext);
  if (context === undefined) {
    throw new Error("Context must be used within a Provider");
  }
  return context;
}

import React，{useContext，useState，useffect，createContext}来自“React”；
从“axios”导入axios；
常量APIContext=createContext（）；
函数APIContextProvider（{children}）{
//初始化状态
const[data，setData]=useState（[]）；
const[isLoading，setIsLoading]=useState（true）；
//获取数据
useffect（（）=>{
让url=“../db.json”；
axios
.get（url）
.然后（功能（响应）{
setData（响应、数据、机器）；
设置加载（假）；
console.log（response.data.machines）；
})
.catch（（错误）=>console.log（错误））；
}, []);
返回(
{儿童}
);
}
导出默认的APIContextProvider；
//创建一个钩子来使用APIContext，这是Kent C.Dodds模式
导出函数useAPI（）{
const context=useContext（APIContext）；
如果（上下文===未定义）{
抛出新错误（“必须在提供程序中使用上下文”）；
}
返回上下文；
}

App.js：

import "./App.css";
import List from "./List";
import APIContextProvider from "./context/apiContext";

function App() {
  return (
    <APIContextProvider>
      <div className="App">
        <List />
      </div>
    </APIContextProvider>
  );
}

export default App;

导入“/App.css”； 从“/List”导入列表； 从“/context/apiContext”导入APIContextProvider； 函数App（）{ 返回( ); } 导出默认应用程序； List.js：

import React from "react";
import { useAPI } from "./context/apiContext";

const FetchData = ({ isLoading }) => {
  // Grab data from useAPI in global context
  const { data } = useAPI();

  return (
    <div>{!isLoading ? <p>{data[0].category}</p> : <p>Loading...</p>}</div>
  );
};

export default FetchData;

从“React”导入React；
从“/context/apiContext”导入{useAPI}；
常量FetchData=（{isLoading}）=>{
//在全局上下文中从useAPI获取数据
const{data}=useAPI（）；
返回(
{！正在加载？{data[0]。类别}
：正在加载…
}
);
};
导出默认数据；

试试这个

//apiContext.js
返回(
{儿童}
);

//List.js
常量FetchData=（）=>{
//在全局上下文中从useAPI获取数据
const{data，isLoading}=useAPI（）；
返回(
{！正在加载？{data[0]。类别}
：正在加载…
}
);
};

// List.js
const FetchData = () => {
  // Grab data from useAPI in global context
  const { data, isLoading } = useAPI();

  return (
    <div>{!isLoading ? <p>{data[0].category}</p> : <p>Loading...</p>}</div>
  );
};