无法访问 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 (将#修改为@）