第一次使用 Context API 所以请多多包涵。
我有一个本地 JSON 文件,我试图从中获取响应并将其放置在 Context API 中,以便我可以在应用程序中全局使用。
在本地运行应用程序后,出现一个空白屏幕,并且页面似乎没有加载。该页面处于无限循环中,因此我看不到它是否正在加载。
密码箱here .
知道我可以改变什么来成功地将数据响应引入 Context 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;
}
应用程序.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;
列表.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;
最佳答案
尝试这个。
// apiContext.js
return (
<APIContext.Provider value={{ data, isLoading }}>
{children}
</APIContext.Provider>
);
// 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>
);
};
关于javascript - 如何获取数据并存储在 React Context API 中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65877884/