上下文提供者在 React 中返回 undefined

Question

我是新手，正在尝试创建一个购物网站。 我想创建一个全局数组来将产品保存在购物车中。 但是，当我尝试将项目添加到购物车数组时，我遇到了错误“TypeError: Cannot read properties of undefined (reading 'includes')”。 我认为这是因为上下文提供程序提供了一个未定义的，在日志中看到购物车“未定义”的值。

我的上下文代码：

const AppContext = React.createContext("")

export const AppProvider = ({
    children
}) => {
    const [cart, setCart] = useState([])

    const value = { cart, setCart }

    return <IconContext.Provider value={value}>{children}</IconContext.Provider>
}

export function useAppContext() {
    return useContext(AppContext)
}

我添加组件的代码：

    const { cart, setCart } = useAppContext()

    const handleCartButton = () => {
        if(!cart.includes({item}))
        {
            const newList = cart.concat( [{item}] );
            setCart(newList);
        }
    }
    useEffect(()=>{
        console.log(cart);    
    },[cart])

index.js 的代码：

ReactDOM.render(
  <React.StrictMode>
    <AppProvider>    <App/></AppProvider>

  </React.StrictMode>,
  document.getElementById('root')
);

Answer 1

问题是您使用的是一个名为AppContext的上下文，但您使用的是上面代码中不存在的IconContext来传递道具。