useContext()返回未定义的
useContext()是React中的一个Hook函数，用于在函数组件中获取上下文(Context)的值。
在React中，上下文(Context)是一种跨组件层级共享数据的机制。通过创建一个上下文对象，可以将数据在组件树中传递给任意深度的子组件，而不需要手动逐层传递props。
useContext()函数接受一个上下文对象作为参数，并返回该上下文的当前值。如果当前组件的父组件没有提供该上下文的值，或者没有在组件树中找到该上下文对象，useContext()将返回未定义(undefined)。
使用useContext()的步骤如下：
- 在父组件中创建一个上下文对象，通过React.createContext()函数进行创建。
- 在父组件中使用上下文对象的Provider组件包裹子组件，并通过value属性传递需要共享的数据。
- 在子组件中使用useContext()函数获取上下文的值。
使用useContext()可以方便地在函数组件中获取上下文的值，避免了通过props层层传递的繁琐过程。
关于React上下文(Context)的更多信息，可以参考React官方文档： https://reactjs.org/docs/context.html
腾讯云相关产品中与React开发相关的产品包括云开发（Tencent CloudBase）和云函数（Tencent Cloud Function）等，可以通过以下链接了解更多信息：
- 云开发（Tencent CloudBase）：https://cloud.tencent.com/product/tcb
- 云函数（Tencent Cloud Function）：https://cloud.tencent.com/product/scf
相关·内容
我想在同一个文件中使用两个useContexts‘。
import React, { useContext, useState } from 'react'
import { SubscribeContext } from '../NavBar'
import { AppContext } from '../../../Home'
import './Subscribe.css'
export default function SubscribePopup() {
const { setSubscribePop } =
浏览 1提问于2022-06-08得票数 2
回答已采纳
1回答
我使用+上下文来管理状态。但是，我遇到了这个问题，即使我正在传递上下文对象(至少我认为是这样)，React.useContext()仍然返回未定义的内容。我错过了什么很明显的东西吗？发生什么事了呢？
我一直试图使用usecontext从本地主机服务器获取数据，但它显示的是未定义的数据。如果我在app.js中获取数据，数据将被正确地获取。
StateContext.js
import React, { createContext, useState, useEffect } from "react";
const StateContext = (props) => {
浏览 4提问于2022-10-09得票数 1
回答已采纳
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
回答已采纳
我正在学习hooks，并试图理解useContext。组件是provider的子组件，
但是当我看到value由useContext返回时，它就是未定义的。
在组件C2中，我得到了未定义的
浏览 2提问于2020-06-15得票数 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
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
回答已采纳
发送数据时，是否未显示未定义的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
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
回答已采纳
嗨，我的react应用程序有问题，我使用useContext将我的用户解析到一个投票站点，但我有一个小问题，我的应用程序是模糊加载的，然后我的上下文变成了未定义的，我可以在第一个console.log上看到用户，但我不能访问它。
const { user, setUser } = useContext(UserContext)
const [medarbejdere, setMedarbejdere] = useState({})
const userLogIn = document.getElementById('id').value;
const user = medar
浏览 3提问于2022-01-28得票数 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回答
我有这个组件，它工作得很好，但只有一次。如果我重新加载，我会有一个未定义的错误。 我的组件： import { UidContext } from "../components/AppContext"
import React, { useContext, useEffect, useState } from "react"
import axios from "axios"
export default function Balance() {
const uid = useContext(UidContext)
const
浏览 24提问于2021-06-21得票数 0
回答已采纳
我用上下文api为经验丰富的钩子创建了一个计数器，一切正常，但我有一个警告：
警告: calculateChangedBits:预期返回值为31位整数.相反收到:未定义
我的背景
export const CountCtx = createContext(0, () => {});
function CountContext() {
const [count, setCount] = useState(0);
return (
<div className="cp1">
<CountCtx.Provider val
浏览 1提问于2019-04-07得票数 5
回答已采纳
我正在试着发送道具，但它并不像我预期的那样工作。
在这种情况下，只有newDataCount被正确发送，而props={props}未定义。
const {newDataCount} = useContext(JobInfoContext);
return( <Switch>
<Route
exact
path={`${path}`}
render={(props) => (
<Check newDataCount={newDataCount} props={pr
浏览 0提问于2021-04-23得票数 0
我试图使用子函数内部的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
我仍然试图掌握useContext()钩子的使用。
我有以下代码；
App.js
const initialPlayerStatus = {
playerHealth: 5,
playerCoins: 0,
playerMoves: 0,
currentLevel: 1,
}
const PlayerStatusContext = React.createContext(null);
export const usePlayerStatus = () => useContext(PlayerStatusContext);
export default
浏览 2提问于2020-04-26得票数 1
回答已采纳
我有一个从redux获取is state的组件。我有一个提供程序，它分派一个操作来获取状态，然后使用useContext将该状态向下传递给这个组件，这在所有其他渲染上都有效，这很奇怪……refresh，get TypeError:无法读取未定义(读取'find')刷新的属性，工作正常。刷新，工作正常。refresh，get TypeError:无法读取未定义的属性(读取'find')刷新工作，很好。 问题是当我尝试在状态上运行查找时，我得到了错误 我猜状态更新得不够快，计算机正在尝试通过不存在的东西进行forEach？ 下面是我的代码 import React
浏览 14提问于2021-11-05得票数 0
我在我的next.js应用程序中使用了带有useReducer钩子的上下文Api，当使用contextProvider调用useContext时，它会返回未定义的结果。 下面是我的代码=> contextPage=> import React, { createContext, useReducer, useContext } from 'react';
import * as types from '../constants/userConstants';
// initialized global store
export const qu
浏览 46提问于2020-11-04得票数 1
回答已采纳
我试图在我的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
回答已采纳
2回答
我想知道是否可以创建上下文并在不将上下文传递到dom树的整个部分的情况下使用它。
在这个程度上，我创建了以下示例：
./components/count-context.js
import * as React from 'react'
const CountContext = React.createContext({count : 0} )
const CountContextProvider = (props) => {
const [count, setCount] = React.useState(0);
const incrementCoun
浏览 0提问于2021-04-08得票数 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回答
我使用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
所以我尝试使用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
我从UserDetails.js中出现了一个“无法读取未定义的属性‘名称’”的错误。"name“值来自上下文。
这是我的密码
UsersContext.js：
import React, { createContext, useState, useEffect } from 'react'
import Axios from 'axios';
export const UserContext = createContext()
export function UserProvider(props) {
const [users, setUs
浏览 3提问于2020-10-20得票数 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
我想要修复错误“不能调用一个可能是未定义的对象”，使用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回答
我一直无法在我的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
回答已采纳
我试图使用上下文api和useReducer显示来自faker js的产品，如下所示
CartReducer。
import { IProduct } from "../context/Context";
export interface IState {
products: IProduct;
cart: [];
}
type Actions =
| {type:"ADD_TO_CART", payload:number}| {type:"REMOVE_FROM_CART", payload:number}| {ty
浏览 1提问于2022-07-12得票数 0
为什么我的背景没有反应？收到以下未定义的错误。
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
回答已采纳
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
回答已采纳
1回答
我正在为我的游戏应用程序使用react，我创建了一个GameContext.js
import React, { useState, createContext } from 'react';
const GameContext = createContext();
const GameProvider = ({ children }) => {
const [startgame, setStartgame] = useState(false);
return (
<GameContext.Provider value={[startgame,
浏览 1提问于2020-03-27得票数 1
回答已采纳
当我只刷新页面的长度(array.length)时，我有一个数组返回未定义的值。
如果我在chrome中的一个新选项卡中打开我的本地环境，一切都会正常工作，并得到数组的长度。只有在刷新一次页面之后，页面才会崩溃，我得到了以下错误："TypeError:无法读取属性‘长度’的未定义“。
我正在使用React，React的上下文API (我从上下文提供程序获得数组)和项目的Nextjs。我有一种感觉，这个问题与SSR有关，但我不完全确定。
这是与问题相关的代码。
上下文提供程序
export function CartProvider(props) {
let initialize
浏览 1提问于2019-12-16得票数 0
回答已采纳
我正在努力学习反应，并坚持在useContext。我尝试过导出提供程序，也从提供程序更改值数据，但它仍然返回未定义的数据！我的背景
import React from 'react';
const BlogContext = React.createContext();
export const BlogProvider = ({ children }) => {
const blogPosts = [
{ title: "Blog Post #1" },
{ title: "Blog Post #2&#
浏览 2提问于2020-03-19得票数 0
回答已采纳
正如标题所示，我的状态在Mobx商店里。我有一个异步方法(action)，它获取数据并将其存储在存储区内的一个属性中，然后在必要的组件中访问它。
问题是，当前该属性将在初始组件呈现时未定义--导致组件中出现错误。
如何使用useEffect()，以便它只运行一次异步方法--并且在初始组件呈现之前--确保状态对return()可用？就像这样：
const Workflow = () => {
const store = useContext(WorkflowContext)
useEffect(async () => {
await store.ge
浏览 4提问于2019-04-17得票数 1
回答已采纳
2回答
如果用户有权访问应用程序，我将使用axios post向后端请求。问题是，axios返回未定义的，然后是true或false。如果返回true或false (在本例中未定义= false)，axios是问题还是有其他方法，那么有一个私有路由来管理该怎么办？就像等待直到返回true或false
IsLogin.jsx
import React from 'react'
const axios = require('axios');
export const AuthContext = React.createContext({})
export default
浏览 4提问于2020-08-13得票数 1
回答已采纳
我使用Next.js和React，使用+上下文来管理状态。但是，我遇到了这个问题，即使我是在传递上下文对象(至少我认为是这样)，React.useContext()仍然返回未定义的内容。我错过了什么很明显的东西吗？发生什么事了呢？
我在一个名为CartContext的const中创建了上下文，然后在我的提供者组件中创建了value对象，并将其作为支持传递给了CartContext.Provider (参见下面的_app.js)。我通过添加一个<h1>元素来确保上下文提供者正在包装我的组件。
这个问题似乎发生在index.js中。我从CartContext中导入了./_app.js，
浏览 13提问于2020-05-15得票数 4
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
回答已采纳
当我的console.log(用户)返回未定义的代码时，它应该返回.{ id: 1，名称：'username‘}。
我不知道是什么原因造成的，如果你有任何想法，请告诉我什么我能做的，也许有更新的useContext，如果是，请通知我。提前谢谢！！
import {createContext, useState} from 'react'
const UsersContext = createContext()
export const UsersProvider = ({children}) => {
const {user, setUser} =
浏览 2提问于2022-06-06得票数 0
我在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
回答已采纳
1回答
我对react js是个新手。我复制了"“中的代码。
当我试图在状态提供程序中读取上下文API值时(在状态更新之后)，这些值是未定义的。我能够从stateConsumer函数中获得正确的值。StateContext在这里是全局对象。
export const StateContext = createContext();
export const StateProvider = ({ reducer, initialState, children }) => {
console.log(useStateValue());
return (
<StateCo
浏览 23提问于2019-08-14得票数 0
我正在使用next.js，并希望将useContext用于全局状态。我在将值从提供程序传递到子元素时遇到了困难。在header.js中，语言的返回值是未定义的。
langContext.js
import { createContext } from 'react';
export const LangContext = createContext();
_app.js
import { LangContext } from '../components/langContext'
const MyApp = ({ Component, pageProps }
浏览 3提问于2020-12-16得票数 0
回答已采纳
我目前正在做我的一个个人项目，总是会遇到这个错误。
//无法读取未定义的属性“映射”
import { Container, Row, Col } from 'react-bootstrap'
import CategoryListItem from './CategoryListItem'
import { useContext } from 'react'
import { ApplicationContext } from './../contexts/ApplicationContext'
export defau
浏览 2提问于2021-06-04得票数 0
4回答
我有一个导航常量，它是一个对象数组(web存储超级导航)。我需要使用上下文提供程序，当我试图使用上下文时，它告诉我NavContext' is not defined no-undef。
NavContext.js
import { createContext } from 'react'
const navigation = [...] // array of objects
const NavContext = createContext(navigation)
export default NavContext
Nav.js
import {createC
浏览 8提问于2021-01-21得票数 1
回答已采纳
在我的应用程序中，我有一个食谱列表视图，也有一个食谱的详细视图。我想在详细视图中删除该配方。
export default function RecipeDetails({ route, navigation }) {
const { recipes, dispatch } = useContext(RecipeContext);
const id = route.params.item.id;
const currentRecipe = recipes.find((r) => r.id === id);
return (
<ScrollView>
浏览 1提问于2020-04-15得票数 0
我正在尝试使用钩子，但我不能弄清楚出现的问题。我想在useEffect中设置令牌值，但是我不能定义它。 import React, { useEffect } from "react";
import "./App.css";
import Login from "./Login";
import { getTokenFromUrl } from "./spotify";
import SpotifyWebApi from "spotify-web-api-js";
import Player from "
浏览 27提问于2020-09-21得票数 0
回答已采纳
1回答
我正在尝试使用来自preact的useContext。似乎我做错了什么，因为我的上下文给出了未定义的值。 下面是主文件： const {render, h, createContext} = window.preact
import htm from 'https://unpkg.com/htm?module'
const html = htm.bind(h)
import SampleComp from './sample-comp.js'
export const ContextOne = createContext()
export const Con
浏览 11提问于2021-01-02得票数 0
回答已采纳
BookContext.js
import React, { createContext, useState } from 'react'
export const BookContext = createContext()
export default function BookContextProvider(props) {
const [books, setbooks] = useState([
{ title: 'the way of kings' , id:1 },
{ title: 'the name
浏览 0提问于2020-04-28得票数 0
我的React应用程序有一个上下文提供程序DataProvider，它从JSON文件中读取一个值并在上下文useData()中提供它。我试图同步读取，以避免处理isLoading，因为这是一个很小的本地JSON文件。
是否建议在上下文提供程序中同步读取JSON文件？
我使用node-sync尝试了下面的操作，但是它给出了一个类型记录错误
对象可能是“未定义”..ts(2532)
关于在线data的研究
return data.find(...
试着把它改成
return data?.find(...`
但现在错误是
属性“find”不存在于“从不”..ts类型上(2339)
import
浏览 3提问于2022-07-10得票数 0
当我从列表中编辑一个名称时，我一直遇到CRUD应用程序的问题，它会引发一个错误"TypeError:无法读取未定义的属性(读取' name ')“。
它似乎起源于我输入字段中的"value={selectedUser.name}“，但是当我删除它时，应用程序会编译，但我根本不能更改该字段--输入时什么都不会发生。任何帮助都是非常感谢的！
import React, { useState, useContext, useEffect } from 'react'
import { GlobalContext } from '../conte
浏览 9提问于2022-05-20得票数 1
回答已采纳
我有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
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
