反应 useContext 正在返回 undefine答案

【问题标题】：React useContext is returning undefine反应 useContext 正在返回 undefine
【发布时间】：2021-02-24 00:36:12
【问题描述】：

我刚刚开始使用 react useContext 并遇到了一个我找不到解决方案的问题。当在另一个文件中调用创建的上下文时，它返回未定义。我试图研究多个答案 like this 和其他人，但找不到一个可以修复错误的答案。

我尝试在这里创建 CartStatusContext 并设置一些初始状态

cartstatuscontext.jsx

import React, { useState } from "react";

const CartStatusContext = React.createContext();

function CartStatusContextProvider({ children }) {
 
    const cartDict = {
        'in_session': "false",
        'battery-level': '8' // level is 1 to 10 
        
    }  
    
    const [cartstatus, setcartstatus] = useState(cartDict);
  
    return ( 
    
        <CartStatusContext.Provider value={{ cartstatus, setcartstatus }}>
            {children}
        </CartStatusContext.Provider>
    );
}

export default CartStatusContextProvider
export {CartStatusContext}

然后我尝试导入并调用此文件中的上下文，但它使应用程序崩溃，我能够通过 console.log 打印确认 CartStatusContext 出现为未定义。

我的 index.jsx

import CartStatusContextProvider , { CartStatusContext } from "../components/cartstatuscontext"

 // Electron related imports
const electron = window.require('electron');
const { ipcRenderer } = electron;
const loadBalancer = window.require('electron-load-balancer');


function MainPage(){
  
 
     const [cartstatus, setcartstatus] = useContext(CartStatusContext);


}

我做错了什么，如何修复未定义错误并获取 CartStatusContext 值？

【问题讨论】：

您是否将您的应用程序包装在ContextProvider 中？

标签： javascript reactjs use-context

【解决方案1】：

这个

function MainPage(){
  const [cartstatus, setcartstatus] = useContext(CartStatusContext);
}

应该改为

function MainPage(){
  const { cartstatus, setcartstatus } = useContext(CartStatusContext);
}

因为这就是它作为值传递给上下文的方式：

<CartStatusContext.Provider value={{ cartstatus, setcartstatus }}>

【讨论】：

【解决方案2】：

您在 CarStatsContext 中存储一个对象，尝试将它们存储在一个数组中，代码应该可以工作

【讨论】：