反應上下文正在給出未定義的對象

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({});