反应上下文正在给出未定义的对象

Question

在我的反应应用程序中，我试图使用上下文 api。 在我的组件中，我正在导入上下文，但它给出了对象无法解构属性的错误。 我正在尝试在我的应用中实现购物车功能。 我正在使用钩子。

图像上下文.js

import React, { createContext, useState } from 'react';

const ImgContext = createContext();

const ImgConProvider = ({children}) => {
    const [myCart, setMyCart] = useState([]);

    return(
    <ImgContext.Provider value={{myCart, setMyCart}}>
        {children}
    </ImgContext.Provider>
    )
}

export {ImgContext, ImgConProvider}

图像网格.js

import React, { useContext, useState } from 'react';
import ImageGrid from './ImageGrid';
import { ImgContext } from './Context/ImageContext';

const Home = () => {

    const { myCart } = useContext(ImgContext);

    return (
    <div className="App">
      {myCart}
    </div>
    )
}

export default  Home;

Answer 1

创建上下文时，您没有提供默认值。 如果存在组件确实有权访问提供程序的情况，则上下文中的值将是未定义的，这可能会导致问题。 最好提供一个默认值。

const ImgContext = createContext({});