javascript - 如何获取数据并存储在 React Context API 中?
问题描述
第一次使用 Context API 所以请多多包涵。
我有一个本地 JSON 文件,我试图从中获取响应并将其放置在 Context API 中,以便我可以在应用程序中全局使用。
在本地运行应用程序后,出现一个空白屏幕,并且页面似乎没有加载。该页面处于无限循环中,因此我看不到它是否正在加载。
Codesandbox在这里。
知道我可以改变什么来成功地将数据响应引入 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>
);
};
推荐阅读
- c# - Selenium PageFactory 惰性求值 StaleElementException
- javascript - 使用下拉菜单选择画布中绘制文本的位置
- python - 在odoo 12中确认销售订单后如何创建和发送电子邮件
- intellij-idea - JDK11+ 上 Intellij 中的字体不清楚
- java - 解决我的问题的最佳数据结构和算法是什么?
- python - Matplotlib - 在动画折线图中实现多个 y 轴刻度
- python - 我无法选择如果从列表中随机选择的元素,则会发生其他事情
- reactjs - 未知 dataProvider 函数:getList 或未知资源未定义
- ios - 使用表单时视图之间出现随机白线
- java - 将方法(java)中的值作为参数传递