javascript - 反应 useContext 正在返回 undefine
问题描述
我刚刚开始使用 react useContext 并遇到了我找不到解决方案的问题。当在另一个文件中调用创建的上下文时,它返回未定义。我试图研究像这样和其他的多个答案,但找不到修复错误的答案。
我尝试在这里创建 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 值?
解决方案
这个
function MainPage(){
const [cartstatus, setcartstatus] = useContext(CartStatusContext);
}
应改为
function MainPage(){
const { cartstatus, setcartstatus } = useContext(CartStatusContext);
}
因为这就是它作为值传递给上下文的方式:
<CartStatusContext.Provider value={{ cartstatus, setcartstatus }}>
推荐阅读
- java - OOXML 电子表格中的默认单元格类型
- python - Django Mezzanine 结构部署,设置错误 - SECRET_KEY 设置不能为空
- html - 使用 html 标记首字母首字母大写
- reactjs - ReactJs TypeError default.a.render 不是函数
- javascript - 我将如何进行如果大学是检查然后这门课程将在下拉列表中?
- python - 从列表中删除标点符号并将字符串值转换为python中的浮点数
- r - R将数据框列表中的列提取到列表中
- javascript - 对象的@property,tslint 给出错误 - no-redundant-jsdoc
- python - 在保持维数的同时选择 Numpy 数组的最后一列?
- python - 使用 Python requests 库获取发送和接收数据的时间戳