使用useContext显示错误:未定义不是对象
。
这个错误通常发生在React应用程序中，当我们使用useContext钩子函数时，尝试访问一个未定义的上下文对象时会出现该错误。下面是对这个错误的完善和全面的答案：
错误概念： 使用useContext显示错误:未定义不是对象是指在React应用程序中使用useContext钩子函数时，尝试访问一个未定义的上下文对象，导致出现错误。
错误分类： 这个错误属于React应用程序中的运行时错误。
错误优势： 错误本身没有优势，但通过捕获和解决这个错误，可以提高应用程序的稳定性和可靠性。
错误应用场景： 这个错误可能在以下情况下发生：
- 当我们在使用useContext钩子函数时，尝试访问一个未定义的上下文对象。
- 当我们在上下文提供者中未正确定义上下文对象时。
解决方案： 要解决这个错误，我们可以采取以下步骤：
- 确保在使用useContext钩子函数之前，已经正确定义了上下文对象。
- 检查上下文提供者组件是否正确地提供了上下文对象。
- 确保上下文对象在使用useContext钩子函数之前已经被初始化。
- 检查是否正确导入了上下文对象。
推荐的腾讯云相关产品： 腾讯云提供了一系列云计算产品，可以帮助开发者构建和部署各种应用程序。以下是一些与云计算相关的腾讯云产品：
- 云服务器（CVM）：提供可扩展的云服务器实例，用于运行各种应用程序。 产品介绍链接地址：https://cloud.tencent.com/product/cvm
- 云数据库MySQL版（CDB）：提供高性能、可扩展的云数据库服务，适用于各种应用程序的数据存储需求。 产品介绍链接地址：https://cloud.tencent.com/product/cdb_mysql
- 云原生容器服务（TKE）：提供高度可扩展的容器化应用程序管理平台，简化应用程序的部署和管理。 产品介绍链接地址：https://cloud.tencent.com/product/tke
- 人工智能机器学习平台（AI Lab）：提供丰富的人工智能和机器学习工具，帮助开发者构建智能化的应用程序。 产品介绍链接地址：https://cloud.tencent.com/product/ailab
请注意，以上推荐的腾讯云产品仅供参考，具体选择应根据实际需求进行评估和决策。
希望以上答案能够满足您的需求，如果还有其他问题，请随时提问。
相关·内容
我正在学习hooks，并试图理解useContext。组件是provider的子组件，
但是当我看到value由useContext返回时，它就是未定义的。
在组件C2中，我得到了未定义的
浏览 2提问于2020-06-15得票数 0
回答已采纳
发送数据时，是否未显示未定义的useContext？发送数据时，发送数据时不显示未定义的useContext，发送数据时不显示未定义的useContext，也不显示未定义的useContext。
Card.jsx
import React from 'react'
import Button from 'react-bootstrap/Button';
import Card from 'react-bootstrap/Card';
import { Link } from 'react-router-dom';
export
浏览 6提问于2022-10-04得票数 -2
我在App.js中创建了一个用户上下文，然后使用context.provider向子组件提供上下文值。我可以简单地使用来自"login.js“组件的上下文，但是当我尝试从另一个组件使用它时，它会提供”未定义“值。
这是我的App.js
import React, {createContext} from "react";
export const UserContext = createContext();
function App() {
const [loggedUser, setLoggedUser] = React.useState({});
const
浏览 0提问于2021-05-19得票数 2
回答已采纳
我试图在NextJS中传递一个上下文对象，该对象使用来自useState挂钩的数据，但是状态变量和setState函数在使用时是未定义的。这很奇怪，因为当我在其位置传递一个简单的变量时，它工作得很好，只有在使用useState时它才是未定义的。所以我知道context对象可以工作，但是useState钩子不能。 我的_app.js文件： import React from 'react';
import App from 'next/app';
import Head from 'next/head';
import Aux from '
浏览 68提问于2020-09-19得票数 0
回答已采纳
1回答
我正在用expo制作一个react本地应用程序，我在解析api中的响应数据时遇到了一些困难。下面是api的一个示例响应，我的目标是从天气数组中检索main。我可以很好地记录天气数组，但是当我放置state.weather[0].main时，它会抛出未定义的对象错误。
Object {
"clouds": Object {
"all": 20,
},
...,
"weather": Array [
Object {
"description": "few clouds",
浏览 0提问于2019-09-24得票数 1
回答已采纳
1回答
我试图通过上下文将petData传递给SearchPage组件。petData正在返回未定义的内容。对我做错了什么有什么帮助。
谢谢
Context.js
import { createContext } from "react";
const PetDataContext = createContext();
export default PetDataContext;
App.js
在app.js上，我获取数据并将其置于axios请求范围之外可访问的状态中。然后我试图通过useContext钩子传递它。
import PetDataContext from ".
浏览 3提问于2021-01-04得票数 0
回答已采纳
1回答
我试图将搜索筛选函数传递到我的搜索栏组件中。但是我一直收到错误TypeError:无法读取未定义的搜索属性' search‘，搜索函数不被识别，我的上下文文件在这里，
import React, { useContext, useEffect, useRef } from 'react';
import ProductContext from '../../src/context';
const ProductFilter = () => {
const productConsumer = useContext(ProductContext
浏览 0提问于2019-08-10得票数 0
回答已采纳
我有TypeError:无法对‘Object(.)(.)’的属性'setValues‘进行重构因为它是未定义的.错误和我不确定为什么.我有一段来自App.js的代码：
import { DataProvider, useData } from "./DataContext";
function App({ ...rest }) {
const { setValues, data } = useData();
...
和DataContext.js
import React, { createContext, useState, useContext } fro
浏览 6提问于2021-05-15得票数 0
回答已采纳
2回答
如何改变国家财产的价值？
、、、、
我正在制作一个小应用程序，该应用程序获取数据，显示在DOM中，并选择一个显示所选用户信息的项，我通过名为UserState的状态管理器处理所有这些问题，其中还添加了显示用户的方法。然后作为一个组件，我有UserList和UserProfile。
这是应该如何工作的，捕获1
UserState.js
import React, {useState} from 'react';
import UserContext from './UserContext';
import axios from 'axios';
function User
浏览 4提问于2021-03-30得票数 0
回答已采纳
我一直在跟踪一些使用useContext的React教程。
在父组件中，我创建了一个新的上下文，
export const Context = createContext({fakeData: 'fake'})
然后在其中一个子组件中，我尝试通过
console.log('fakeData1', useContext(Context))
const context = useContext(Context)
console.log('fakeData2', context)
然后，我从父组件导入了Context。
在我的console.lo
浏览 3提问于2020-06-24得票数 1
回答已采纳
我有一个从redux获取is state的组件。我有一个提供程序，它分派一个操作来获取状态，然后使用useContext将该状态向下传递给这个组件，这在所有其他渲染上都有效，这很奇怪……refresh，get TypeError:无法读取未定义(读取'find')刷新的属性，工作正常。刷新，工作正常。refresh，get TypeError:无法读取未定义的属性(读取'find')刷新工作，很好。 问题是当我尝试在状态上运行查找时，我得到了错误 我猜状态更新得不够快，计算机正在尝试通过不存在的东西进行forEach？ 下面是我的代码 import React
浏览 14提问于2021-11-05得票数 0
import React, { useContext } from "react";
import { ContextProvider, MyContext } from "./Context/MyContext";
import "./styles.css";
export default function App() {
const value = useContext(MyContext);
console.log(value);
return (
<ContextProvider>
<d
浏览 3提问于2020-11-16得票数 0
回答已采纳
1回答
我有反应申请。我最近添加了一个POST功能。当我通过useContext将它连接到前端时，我得到了以下错误消息：
src/components/messages/SendMessage.js第57:16行：'senderName‘未定义-undef第66:16行：'senderEmail’未定义为no-undef第75:16行：'senderCompanyName‘未定义为no-undef第84:16行：'message’未定义为no-undef搜索关键字以了解有关每个错误的更多信息。
未定义的元素是我连接到组件的默认状态。它应该获取输入数据，然后通过Fet
浏览 2提问于2021-10-01得票数 0
回答已采纳
为什么useContext是未定义的？
上下文
import React from 'react'
const PathContext = React.createContext()
export default PathContext
从jsx文件
import PathContext from '../../../contexts/pathContext';
.......
<PathContext.Provider
value={{
paths,
pathChecks
}}
>
<
浏览 5提问于2020-04-29得票数 0
回答已采纳
我对测试和使用酶和Jest编写非常简单的测试是个新手。我只想检查组件是否渲染。然而，(我猜)因为我的组件使用useContext钩子，所以测试用例自动返回来自上下文的所有值的未定义。 在组件中： const { count, setCount } = useContext(Context); 测试用例： it('should render', () => {
const component = shallow(<MyComponent />);
const wrapper = component.find('myClassName')
浏览 46提问于2019-12-14得票数 1
1回答
我使用useContext在react应用程序中传递状态，我对测试很陌生，我正在尝试单元测试(Jest/酶)--一个名为timer.js的反应组件
import React, { useEffect, useContext } from 'react';
import { GameContext } from './global/contexts';
export default function Timer(){
const {timer, setTimer} = useContext(GameContext);
useEffect(()=>{
浏览 3提问于2021-11-15得票数 0
1回答
我使用+上下文来管理状态。但是，我遇到了这个问题，即使我正在传递上下文对象(至少我认为是这样)，React.useContext()仍然返回未定义的内容。我错过了什么很明显的东西吗？发生什么事了呢？
我一直试图使用usecontext从本地主机服务器获取数据，但它显示的是未定义的数据。如果我在app.js中获取数据，数据将被正确地获取。
StateContext.js
import React, { createContext, useState, useEffect } from "react";
const StateContext = (props) => {
浏览 4提问于2022-10-09得票数 1
回答已采纳
2回答
我试着用useContext传递和更新一个状态；
App.js
import Home from './components/Home'
const UserContext = createContext();
function App() {
const [name, setName] = useState('Name');
return (
<UserContext.Provider value={{name, setName}}>
<Home/>
</UserContext.
浏览 4提问于2021-10-02得票数 4
回答已采纳
? FirebaseError:使用无效数据调用了函数DocumentReference.set()。不支持的字段值:未定义(在文档channelroom中的字段user /mfJm8DH7f5w14GO1W45y中找到 尝试创建名为message inside channelroom/mfJm8DH7f5w14GO1W45y/messages /6lUXO2mRwl75G0hV3HoA)的新集合时，会显示消息错误消息 import React,{useState,useContext} from 'react';
import db from './
浏览 15提问于2020-09-16得票数 0
我试图在我的react-native应用程序中实现useContext，但得到了一个错误：“未定义不是一个对象(计算'context._context')”。 下面是我的代码(尝试使用EmailContext)： import React, {useState} from 'react';
export const Emailcontext = React.createContext("");
const ContextStore = ({children}) => {
const [emailAddress, setEmai
浏览 23提问于2020-11-06得票数 0
回答已采纳
3回答
如果登录的用户是否是管理员，我需要使用来自useContext的数据进行身份验证。但是它首先给出“未定义”的值，然后在延迟5秒后给出实际值。但是到那时，代码会中断，因为它不能处理“未定义的”。
import React, { useContext, useEffect } from 'react';
import { useHistory } from 'react-router-dom';
import { AuthContext } from '../../context/AuthContext';
const Admin = () =&g
浏览 6提问于2020-06-17得票数 4
回答已采纳
我想要修复错误“不能调用一个可能是未定义的对象”，使用react和typescript。
我想做什么？我正在使用usecontext react钩子并在组件(home、Dialog和hook组件)中从它创建一个变量(dialogContext)。在这样做时，我得到了上述错误。
我在助手文件中定义DialogContext，如下所示
interface ContextProps {
setDialogOpen?: (open: boolean) => void;
}
export const DialogContext = React.createContext<Co
浏览 3提问于2020-05-25得票数 3
回答已采纳
1回答
我知道这个错误：
无法读取未定义的属性(读取“forEach”)，该属性指的是家庭组件中的类型上下文：
genre.genres.forEach((element)=> {.....
经过多次刷新之后，这个问题就消失了，我想，在从api中获取数据并传递到状态之前，将呈现主组件。怎么解决这个问题？
应用程序
import * as api from "./api"
import { useState, useEffect } from 'react';
import { createContext } from 'react';
impor
浏览 2提问于2022-01-08得票数 0
回答已采纳
2回答
我有一个简单的反应应用程序，在其中我必须使用useContext。
(顺便说一句，使用vite + react)
这是我的Context.jsx代码
import React, {useContext} from 'react';
const emailContext = React.createContext();
export const useEmail = () => useContext(emailContext);
export const emailProvider = ({children}) => {
const currentUser
浏览 3提问于2021-07-16得票数 1
回答已采纳
为什么我的背景没有反应？收到以下未定义的错误。
import React, { useContext } from 'react';
function BookList() {
const PrintContext = React.createContext("CAR");
const list = [
{ title: 'ABCDE', author: 'John Smith' }
]
return (
<PrintContext.Provider value="APPLE&
浏览 2提问于2020-08-24得票数 1
回答已采纳
1回答
我一直无法在我的React应用程序中正确使用上下文。大多数文档都使用基于类的组件，我正在尝试使用功能组件。 该错误说明未定义AppContext。 App.js和Header.js位于不同的文件中。 如果我在<AppContext.Provider value='AppName'>之后立即添加console.log(React.useContext(AppContext))，则会记录正确答案。但是，这里没有在Header中定义AppContext： const app = useContext(AppContext); 以下是代码的当前状态： App.js imp
浏览 18提问于2021-02-11得票数 0
回答已采纳
我试图使用useContext()在云图恢复中映射图像集合，从而在图片库中显示图像，但由于“对象(.)(.)”的属性'docs‘未定义，因此我的错误是“无法重构”属性“docs”
上下文：
import { projectFirestore } from '../Firebase'
import { useEffect, useState, useContext, createContext} from 'react'
const FireStoreContext = createContext()
export function useFireSt
浏览 2提问于2021-06-10得票数 2
1回答
用多个console.log响应
、、、、
我创建了一个功能组件，我的axios请求用两个未定义的响应和一个响应200来响应。我不明白为什么？
这是我的组成部分：
import { UidContext } from "../components/AppContext"
import React, { useContext, useEffect, useState } from "react"
import axios from "axios"
export default function Balance() {
const uid = useContext(UidContex
浏览 1提问于2021-06-18得票数 1
回答已采纳
问题:当捆绑时，代码停止工作。我有下面的钩子--它消耗一个上下文，一个组件使用这个钩子：
const useAContext = () => {
return useContext(AContext)
}
const SomeComponent = () => {
const aContextProps = useAContext()
...
}
这很好，没有错误。
在捆绑之后(使用rollup和babel)，我得到了以下编译代码：
var useAContext = function useAContext() {
return useContext(A
浏览 2提问于2022-08-09得票数 0
我正在使用Next.js处理一个TypeScript应用程序，我有以下错误：
“react__WEBPACK_IMPORTED_MODULE___.useContext)(...)‘：无法构造属性’TypeError‘of (0，因为它是null)。”
这是我的_app.tsx文件：
import { useContext } from "react"
import { ThemeProvider } from "styled-components"
import ContextProvider from "../context/Context"
浏览 3提问于2022-02-25得票数 1
1回答
我正在尝试用useContext和useReducer创建一个redux模式。我创建了一个创建上下文( reducer)的组件，并且我还具有初始值。我用前面的内容声明我的还原，并返回到减速器的值所提供的子组件。然后，在下一个映像中，我有一个视图，该视图将呈现一个构成表单的组件，并将其包装在ExpenseReducer组件中，从而使其具有my reduce的值。
在表单中，我导入上下文并尝试使用分派，但是我得到了一个类似于“未定义”的错误。
我的密码
import React from "react";
//Context
export const Expen
浏览 8提问于2020-02-05得票数 0
我正在尝试创建一个通用的、可重用的提供程序组件，但出于某种原因，从useContext中使用useContext将返回到未定义的状态。在提供程序本身状态不是未定义的情况下，我可以看到初始状态。
提供者本身
import React, { useReducer, createContext } from 'react';
export const defaultContext = (context) => {
let BaseContext = context;
if (!context) {
console.log('is this gettin
浏览 3提问于2022-06-12得票数 1
回答已采纳
1回答
我正在努力学习如何正确地使用上下文和钩子。当一切都在类中时，我让它工作，当我把它分到其他类的那一刻，上下文就找不到了。这是我尝试过的。“ 我已经将我的应用程序打包到了提供者中。 import React, {useContext} from 'react';
import Header from 'components/Header';
class App extends React.Component {
constructor () {
super();
this.state = {
firstName: &#
浏览 8提问于2019-04-21得票数 0
回答已采纳
我在打字稿中使用CreateContext，我可以理解为什么代码会出现问题，但我无法解决它。它是对typesafe TX的基本使用，使状态和(useReducer)调度在组件层次结构中可用。
沙箱：
上下文接口：
export interface ContextInterface {
state: AppState;
dispatch: (action: ActionType) => void;
}
使用createContext的接口(我认为它必须是一个部分，因为createContext不会使用零args)
const TodoContext = createContext&
浏览 3提问于2022-01-26得票数 1
回答已采纳
2回答
在这里，我已经为我的上下文存储声明了一个基本的原型，当我尝试使用这个存储时，它返回的是未定义的，尽管我双重检查了语法，以便有人可以帮助为什么返回它是未定义的：
商店：
import { createContext } from "react";
const AuthContext = createContext("Default");
export const AuthContextProvider = (props) => {
const loginHandler = () => {
console.log("Login H
浏览 13提问于2022-10-08得票数 1
回答已采纳
所以我尝试使用react context API创建一种类型的存储，我遇到了一个问题，当我使用useContext时，它返回未定义。我的代码是这样的： StateProvider.js import React, { createContext, useContext, useReducer } from "react";
//Needed to track the basket and the user info
//DATA LAYER
export const StateContext = createContext();
// BUILD PROVIDER
ex
浏览 14提问于2020-08-13得票数 1
2回答
我第一次使用React，我试图过滤一个JSON响应，这样我就可以显示产品列表。
当我将过滤器的结果记录到控制台时，我似乎得到了正确的数据。然而，当我试图对它进行映射并呈现它时，".Products“似乎是没有定义的。
import React, { useContext } from 'react';
import { MenuContext } from '../context/menuContext';
function Category() {
const [categoryItems] = useContext(MenuCon
浏览 7提问于2022-02-15得票数 1
回答已采纳
1回答
我猜这是某种JS订单或事件吧？在下面的代码中，核心是由全局上下文提供程序填充的。console.log起作用，数据类型是数组。但是，filter方法会错误地指出未定义心脏。 const [active, setActive] = useState();
const { hearts } = useContext(GlobalContext);
const record = props.record
console.log(hearts)
var arrayCheck = hearts.filter(heart => heart.id === record.id) 有什么想法吗？我会非常
浏览 13提问于2020-04-10得票数 0
-发展环境: window10、VScode
-技术:反应--打字稿
我只想使用contextAPI来全局管理变量。(我不使用useReducer)
变量是从axios接收的对象。
const result = await axios.post('/register', {name,username,password})
console.log(result.data);
我希望使用useState管理顶层组件中的变量。
但由于类型问题，我不能做我想做的事。
// AuthContext.tsx
import {createContext, u
浏览 10提问于2021-10-23得票数 1
回答已采纳
我试图使用React上下文钩子和类型记录传递todos (初始状态)和addNewTodo (方法)。我尝试过多种解决方案，但没有成功，仍然有错误。
Partial泛型没有给出上下文组件的问题，但是它在todo表单组件中调用addNewTodo时给出了错误Cannot invoke an object which is possibly 'undefined'。同样，未定义对象{}和空对象{}也会产生不同的错误。我想不出怎么修好它。如果我通过any，那么IntelliSense就不能工作了。
这里是我的代码
TodoContext
import React, { useStat
浏览 0提问于2020-08-03得票数 3
回答已采纳
我正在尝试创建用于搜索电影的React应用程序(我正在使用电影数据库API)，当我点击搜索按钮时，如果输入为空，我希望弹出一个警报组件，但是我在同一组件中收到警报是未定义的错误。 Alert.js import React, { useContext } from "react";
import AlertContext from "../context/alert/alertContext";
const Alert = () => {
const alertContext = useContext(AlertContext);
const
浏览 18提问于2020-07-08得票数 0
回答已采纳
我从AllmightyUID组件中的App.js通过contextApi发送User.js =2(例如)，在用户组件中没有useEffect，但是当我在用户组件中记录值时，它被记录了2次，第一次显示未定义，第二次更正数据(2)，即使在2- 3秒之后，由于这个原因，我无法再进行api调用(我无法读取未定义的值)
我尝试过的解决方案:-
1.)我已经从index.js中删除了严格模式
2.)作为道具传递值，但仍然是相同的问题。
import React, { useContext, useState } from 'react'
import { AllMightyUID } fr
浏览 1提问于2022-07-18得票数 -2
我试图使用子函数内部的useContext来访问上下文道具，但是道具始终是默认的
import React, { createContext, useContext } from "react";
const Context = createContext(undefined);
export default function Component() {
return (
<Context.Provider value={{ variable: 123 }}>
{(() => {
const context_valu
浏览 4提问于2021-10-21得票数 0
1回答
我已经在我的站点上创建了动态路由，当用户成功登录时，动态路由会发生变化。日志记录的事实，我保持在全局状态，通过mobx观察。当用户成功登录时，路由也会发生变化，并且工作正常，但是在控制台中，存在下一个问题：。
文本变体中的错误：
by :67警告: React检测到了AppRouter调用的钩子顺序的变化。这将导致错误和错误，如果不修复。有关更多信息，请阅读Hooks的规则：
上次渲染下一次呈现
useState useState
useState useState
useRef useRef
useDebugValue useDebugValue
useEffect us
浏览 3提问于2022-03-03得票数 1
回答已采纳
1回答
中的问题
、、、、
面对react中的问题，在使用context api传输任何内容时，会出现未定义的情况。
获取此错误，在通过上下文api发送函数时得到未定义的信息。
*** Context.js
import React, { useReducer, createContext } from "react";
import contextReducer from "./contextReducer";
const initialState = [];
export const ExpenseTrackerContext = createContext(initialSt
浏览 2提问于2021-01-29得票数 0
我正在学习如何将useContext和useReducer结合使用，但是我还没有发现一个错误：
Uncaught :对象不可迭代(无法读取属性符号(Symbol.iterator))
它发生在破坏MealItemForm.js内部的上下文之后。我尝试在createContext中设置默认值，导入带大括号和不带大括号等。我试图在子组件中分配函数。有什么想法吗？
MealItemForm.js
import React,{useContext} from 'react';
import MeatContext from '../store/meat-context
浏览 5提问于2022-02-01得票数 0
回答已采纳
我在访问子组件中的上下文时遇到问题，它返回给我未定义的 router.js class Home extends Component {
render() {
let { url } = this.props.match
return (
<div className='container-main'>
<Menu baseUrl={url} />
<Switch>
<Route exact path={`${url}/tasksVision`} component={Home} />
浏览 13提问于2020-08-25得票数 1
1回答
我试图通过使用SetState传递状态和useContext。但有一些奇怪的东西:只有一个人可以传给儿童病人。我想传递{isLogin，setIsLogin，name}，只有名称才能正确显示如下：
也可以在中运行
import React, { useState, createContext, useContext } from "react";
import { Text, View, Button } from "react-native";
const AppContext = createContext();
const AppProvider =
浏览 8提问于2022-09-28得票数 0
回答已采纳
在下面的代码段中，当传递上下文的值时，useCallback将保持所有按钮按预期的方式重新呈现。也就是说，clickFunction是缓存的。
Stackblitz：
clickFunctionContext.js
import { GlobalContext } from "./GlobalState";
export const ClickFuncContext = createContext();
export const ClickFuncProvider = ({ children }) => {
const { speakerList, setSpea
浏览 6提问于2020-08-07得票数 1
回答已采纳
1回答
我无法使用react本机功能组件中的createContext钩子访问useContext传递的数据: context.js如下
import React , {createContext,useState} from 'react';
export const Style1 = React.createContext();
export default StyleContextProvider = (props) => {
const [myValue,setValue] = useState([{one: 1},{two : 2}]);
console.log(
浏览 6提问于2021-07-10得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
