如何解决无法访问 MERN 堆栈应用程序中上下文中的数据
为什么我无法从上下文访问我的产品数据?
以下是产品数据的来源:
const Products = props => {
const [user,setUser,addToCart,setChosenImage] = useContext(UserContext);
const [product,productData] = useContext(ProductContext);
...
<div className="product--TopButton--Container">
<button className="about--Button" onClick={() => productData(product._id)}>About</button>
</div>
这里是上下文:
export const ProductContext = React.createContext({})
const ProductProvider = ProductContext.Provider;
const ProductContextProvider = (props) => {
const [product,setProduct] = useState({})
const productData = (id) => {
fetch (`${API}/products/details/${id}`,{
method: 'GET',})
.then (response => response.json ())
.then (response => {
setProduct(response)
})
.then(() => window.location = `/details/${id}`)
.catch (error => {
console.error (error);
})
}
console.log(product)
return (
<ProductProvider value={[product,productData]}>
{props.children}
</ProductProvider>
)
}
export default ProductContextProvider;
注意:console.log 显示正确的产品。但是我无法在 ProductAbout 组件中访问它。
这是我提供它的方式:
<ProductContextProvider>
<Route exact path="/products" component={Products} />
<Route exact path="/details/:id" component={ProductAbout} />
</ProductContextProvider>
这是我尝试使用它的地方:
const ProductAbout = () => {
const [product] = useContext(ProductContext)
console.log(product)
return(
<div>hi{product?.name}</div>
)
}
export default ProductAbout;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。