我有当前保存数据的contextapi设置。我有一个“/details/id”页面,我想为每个产品加载特定于产品的数据。我已经设置了这个“/details/id”页面,以便使用react router进入我的“machinedeail.js”组件,我只需要将contextapi中保存的数据放入machinedeail.js组件。
在下面的machinedeail.js下,您将看到我正在测试图像中的加载,看看它是否有效。目前还没有加载。
这里是codesandbox中的完整代码。
apicontext.js(我在这里创建了上下文存储)
import React, { useContext, useState, useEffect, createContext } from "react";
import axios from "axios";
const APIContext = createContext();
export default function APIContextProvider({ children }) {
// Initialize state
const [data, setData] = useState([]);
const [isLoading, setLoading] = useState(true);
// Fetch data
useEffect(() => {
let url = "../db.json";
axios
.get(url)
.then(function (response) {
setData(response.data.machines);
setLoading(false);
})
.catch((error) => console.log(error));
}, []);
return (
<APIContext.Provider value={{ data, isLoading }}>
{children}
</APIContext.Provider>
);
}
// 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;
}
machinedeail.js(我试图将数据加载到其中)
import React from "react";
import { useAPI } from "../context/apiContext";
import Header from "../components/Header";
export default function MachineDetail() {
// Load in global state
const { data, isLoading } = useAPI();
return (
<>
<Header title="Product title" subTitle="Product category" />
{!isLoading ? (
<div className="container">
<div className="row">
<div className="col-lg-6">
<img src={data.model.image} alt="" /> <-- trying to load in data here
</div>
</div>
</div>
) : (
<p>Loading...</p>
)}
</>
);
}
1条答案
按热度按时间djp7away1#
我建议在您的上下文中创建函数,您将调用machinedetail组件的内部useeffect。在您的应用程序中,您在装入上下文时提取,但在呈现组件时不提取。