React Context - "this“未定义
React Context是React框架中的一个特性，用于在组件树中共享数据，避免通过props一层层传递数据。通过React Context，可以在组件树中的任何地方访问共享的数据，而不需要将数据一层层传递给子组件。
React Context的主要概念包括Provider和Consumer。Provider组件用于提供共享的数据，而Consumer组件用于消费这些数据。通过在组件树中嵌套使用Provider和Consumer，可以实现数据的共享和传递。
React Context的分类：
- 单一Context：使用单一Context可以在整个应用中共享一个数据源。
- 多个Context：使用多个Context可以将数据分成多个独立的部分进行共享，每个部分可以有自己的Provider和Consumer。
React Context的优势：
- 避免了props层层传递数据的繁琐过程，提高了开发效率。
- 方便实现全局状态管理，使得多个组件可以共享和修改同一份数据。
- 灵活性高，可以根据需求将数据分成多个独立的部分进行共享。
React Context的应用场景：
- 全局主题设置：可以使用React Context将主题配置信息共享给整个应用，实现全局的主题切换。
- 用户登录状态管理：可以使用React Context将用户登录状态共享给需要访问用户信息的组件。
- 多语言支持：可以使用React Context将当前语言环境共享给需要显示多语言内容的组件。
推荐的腾讯云相关产品和产品介绍链接地址：
- 腾讯云云服务器（CVM）：提供高性能、可扩展的云服务器实例，满足各种计算需求。产品介绍链接：https://cloud.tencent.com/product/cvm
- 腾讯云云数据库MySQL版：提供稳定可靠的MySQL数据库服务，支持高可用、可扩展、自动备份等特性。产品介绍链接：https://cloud.tencent.com/product/cdb_mysql
- 腾讯云对象存储（COS）：提供安全、稳定、低成本的云存储服务，适用于各种数据存储需求。产品介绍链接：https://cloud.tencent.com/product/cos
- 腾讯云人工智能平台（AI Lab）：提供丰富的人工智能服务和开发工具，帮助开发者快速构建和部署AI应用。产品介绍链接：https://cloud.tencent.com/product/ai
- 腾讯云物联网平台（IoT Hub）：提供全面的物联网解决方案，包括设备接入、数据管理、消息通信等功能。产品介绍链接：https://cloud.tencent.com/product/iothub
- 腾讯云区块链服务（Tencent Blockchain）：提供安全、高性能的区块链服务，支持多种区块链应用场景。产品介绍链接：https://cloud.tencent.com/product/tbc
相关·内容
1回答
为什么上下文值显示未定义？
src/Context.js：
import React, { Component } from 'react';
const Context = React.createContext();
export class Provider extends Component {
state = { a: 1, b: 2 };
render() {
return (
<Context.Provider value={this.state}>
{this.props.children}
浏览 1提问于2019-05-19得票数 0
回答已采纳
我试图在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
回答已采纳
我试着从我命名为‘AnimeCategory’的代码中得到“Context.js”
import axios from "axios";
import React, { createContext, useState } from "react";
export const AnimeContext = createContext();
const Context = ({ children }) => {
const [index, setIndex] = useState(1);
const [error, setError] =
浏览 3提问于2022-05-26得票数 0
import React from 'react';
state = {language : 'english'};
onLanguageChange = (language) =>{
this.setState({language});
}
render(){
return (
<Context.Provider value ={{...this.state, onLanguageChange }}>
{this.props.children}
</Cont
浏览 7提问于2021-05-30得票数 1
回答已采纳
PhantomJS将抛出：
未定义不是对象(计算'Component.contextTypes')
我的组件是
import React, {Component, PropTypes} from 'react'
export default class InputText extends Component {
constructor (props, context) {
super(props, context)
this.state = {}
}
render () {
浏览 6提问于2016-11-17得票数 1
我正在尝试创建一个通用的、可重用的提供程序组件，但出于某种原因，从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
回答已采纳
我试图在我的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
回答已采纳
我正在重构TypeScript a in ReactJS，这是我所遵循的。在大多数情况下，本教程将教您如何将大部分代码重构为额外的材料。然而，登录部分是在ReactJS/JavaScript中完成的，我试图重构我的代码，作为挑战自己的一种方式。我坚持的部分是createContext，因为我无法理解所需的类型。
原始JS代码
JS代码-上下文/提供程序
import React, { useState, createContext } from "react";
export const Context = createContext();
const UserProv
浏览 9提问于2022-03-11得票数 3
回答已采纳
我希望在useParams()内部传递createContext()的数据，以便在不同的组件中使用数据
登录组件：-
import React,{createContext} from 'react';
import {useParams} from 'react-router-dom';
export const Context = createContext(companyName);
function Login(){
const {companyName} = useParams();
return(
<div>//some
浏览 1提问于2022-08-19得票数 0
2回答
如何解构包含函数的对象？
、、、
我有以下React组件：
import { AppInterface } from 'pages/_app'
export default class SiteNavBtn extends React.Component {
static contextType = AppInterface
render() {
const { actions } = this.context
const { toggleSiteNav } = actions || {}
return(
<
浏览 0提问于2019-04-12得票数 2
我正在尝试用jest使用挂载测试我的上下文API实现，但是我得到了一个错误。
TypeError:无法读取未定义的属性“状态”
在测试期间，我尝试过各种技术将上下文数据传递给组件，但到目前为止没有成功。
ApplicationContext.js
import React from 'react'
const AppContext = React.createContext()
export default AppContext
MyComponent.js文件
render () {
return (
<AppContext.Consumer>
浏览 2提问于2019-09-23得票数 0
回答已采纳
我正在尝试为我的component App.js设置测试，它接受一个context作为道具，并返回一个提供者。问题是，当我试图测试它时，我传递给它的上下文总是解析为undefined。
我在组件中放置了一个控制台日志，并在创建上下文和创建组件之间放置了一个控制台日志(它应该将上下文作为参数接收)。由于某些原因，这导致组件中的console.log最先出现。这可能就是为什么我得到的上下文是未定义的，因为它还没有初始化。
// Component/Provider
const App = (props) => {
const {children, context} = props;
浏览 1提问于2019-04-14得票数 6
我试图使用子函数内部的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
import React, {Component} from 'react';
import { Link } from 'react-router';
class AsideNav extends Component{
constructor(props, context) {
super(props, context);
this.state = {
navigation: ''
};
}
componentWillMount(){
console.log(this.props.
浏览 6提问于2017-04-13得票数 1
2回答
我正在构建一个带有React的电子商务应用程序，并且在将数据从全局状态传递到所需组件时面临一些困难。
Reducer.js
export const reducer = (state, action) => {
console.log(action.item)
switch (action.type) {
case "ADD_TO_CART":
return {
...state,
cart: [...state.cart, action.item]
浏览 4提问于2022-03-19得票数 0
1回答
未定义的TypeError:无法读取未定义的属性“分派”
这发生在ReactRouter.js中的handleLocationChange中：
handleLocationChange: function handleLocationChange(change) {
this.dispatch(change.path, change.type);
},
这是从我的电话下游到
This.context.transitionTo(“某某物”)；
“某物”是我定义的路线之一。为什么“这”是不明确的？
下面是调用代码的组件：
var React = requir
浏览 0提问于2015-05-06得票数 0
内部类
constructor(props, context) {
super(props, context);
someFn = () = {
this.context.router.transitionTo('google.com');
}
在组件底部
MyComponent.contextTypes = {
router: React.PropTypes.func.isRequired
};
我一直收到错误警告:失败的上下文类型:必需的上下文router没有在Homepage__中指定。
单击该按钮导航时，将得到以下附加错误未定义的TypeError
浏览 0提问于2015-09-27得票数 0
2回答
我有一个蓝牙类和侦听器方法。我想在蓝牙类中更新我的状态，我将在功能组件中显示。
JavaScript类
import React, { Component } from "react";
import { MySampleContext } from "../../contexts/MySampleContext";
export class BluetoothClass extends Component {
static contextType = MySampleContext;
sampleBluetoothListener
浏览 8提问于2022-04-27得票数 0
在基于类的使用者组件中访问this.context有问题。我有以下情况：
AppContext.js：
import React from "react";
const ContactContext = React.createContext(); // Create our context
export default ContactContext;
DataProvider.js：
import React, { Fragment } from "react";
import AppContext from "./AppContext&#
浏览 0提问于2021-04-29得票数 0
回答已采纳
1回答
我使用+上下文来管理状态。但是，我遇到了这个问题，即使我正在传递上下文对象(至少我认为是这样)，React.useContext()仍然返回未定义的内容。我错过了什么很明显的东西吗？发生什么事了呢？
我一直试图使用usecontext从本地主机服务器获取数据，但它显示的是未定义的数据。如果我在app.js中获取数据，数据将被正确地获取。
StateContext.js
import React, { createContext, useState, useEffect } from "react";
const StateContext = (props) => {
浏览 4提问于2022-10-09得票数 1
回答已采纳
我一直在跟踪一些使用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
回答已采纳
我正在尝试在我的ract-本地应用程序中上下文api。但我得到了这个错误。TypeError: TypeError:无法读取未定义的属性“数字”。，我的代码出了什么问题？
appContext.js
import React from 'react';
export const AppContext = React.createContext();
class AppProvider extends React.Component {
constructor(props) {
super(props);
this.state = {
浏览 0提问于2018-09-24得票数 0
我试图做一个简单的使用react路由器(版本^1.0.3 )重定向到另一个视图。
import React from 'react';
import {Router, Route, Link, RouteHandler} from 'react-router';
class HomeSection extends React.Component {
static contextTypes = {
router: PropTypes.func.isRequired
};
constructor(props, context) {
浏览 18提问于2016-01-12得票数 160
回答已采纳
我想把一些数据传递给我的组件。我找到了这个例子：，我已经创建了一个类DataWrapper，如本例中所示：
import React, { Component } from 'react'
export default class DataWrapper extends Component {
constructor(props) {
super(props)
}
getChildContext () {
return {
data: this.props.data
};
}
render () {
ret
浏览 0提问于2016-11-13得票数 0
回答已采纳
我最近升级了我的项目，使用React 16.4.1而不是15.2.1。我有以下组件，但由于出现TypeError：_react2.default.PropTypes is undefined error而中断。
import React, { Component } from 'react';
import { connect } from 'react-redux';
export default function (ComposedComponent) {
class Authentication extends Component {
sta
浏览 22提问于2018-07-24得票数 1
回答已采纳
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
回答已采纳
当我尝试使用以下代码动态导入xml文件时：
const path = require.context(`../report/${runId}/`, false, /\.xml$/);
我得到了这个错误：
Uncaught (in promise) TypeError: __webpack_require__(...).context is not a function
at fetchData (xmlparser.js:28:1)
at Run.getTests (Run.js:16:1)
at Run.componentDidMount (Run.js:10:1)
浏览 4提问于2022-08-02得票数 1
./App.js
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from './context.js';
import { Provider as Provider2 } from './context2.js';
import Child from './Child.js';
import "./styles.css";
class App extends React.Compo
浏览 2提问于2018-12-14得票数 0
回答已采纳
嗨，我正在尝试使用上下文API，这是我的代码
App.js
import {Provider} from './components/contexApi/context';
class App extends Component {
render() {
return (
<Provider>
<div className="App">
<Header />
<TodoList />
</div>
浏览 4提问于2020-03-16得票数 1
回答已采纳
1回答
新的反应(和本机)，我试图修改。我正在尝试将SignInScreen移动到它自己的文件中，并从默认的App调用它，下面是发生错误的SignInScreen文件：
import * as React from 'react';
import { Button, View, TextInput } from 'react-native';
const context = React.createContext();
export function SignInScreen() {
const [username, setUsername] = React.u
浏览 1提问于2020-02-22得票数 0
回答已采纳
我正在用chai + karma +酶测试react组件。
mount(
<Provider store={configureStore(mockContext, null)}>
<Component {...props} />
</Provider>
)
我在这个组件中使用了context.router.location。我得到的错误是这个未定义。我尝试使用mount的第二个参数传递上下文，如下所示：
mount(
<Provider store={configureStore(mockContext, null)}>
<Comp
浏览 1提问于2017-04-01得票数 1
这是我的组件
import React, { PropTypes } from 'react';
import { MapLayer } from 'react-leaflet';
import L from 'leaflet';
import './collision.js';
export default class LayerGroupCollision extends MapLayer {
static childContextTypes = {
layerContainer: PropTypes.shape
浏览 7提问于2017-03-14得票数 0
第一次使用这种方式-试图绘制一个基本的模拟画布开始一个新的游戏，但返回‘未定义的TypeError:无法读取属性'setupCanvas’。有人能找出原因吗？
game.jsx
// initial game parameters and setup
'use strict';
import React from 'react';
export default React.createClass({
propTypes: {
rectHeight: React.PropTypes.number,
rec
浏览 3提问于2015-11-03得票数 0
回答已采纳
我正在尝试包含react Facebook登录，并且完全按照face books ()中的描述进行操作，但不断收到奇怪的错误。我是个新手，很久以来一直在看我的代码，但我不知道我做错了什么，因为我正在做他们文档中描述的事情。任何帮助都将不胜感激！谢谢!
错误: const responseFacebook的意外标记：
import React from 'react';
import ReactDOM from 'react-dom';
import FacebookLogin from
浏览 0提问于2017-09-05得票数 0
我一直在尝试使用React Native中的上下文钩子，但它似乎不起作用，它返回未定义。但是，当我使用<Context.Consumer>时，它确实工作得很好，你知道useContext在React Native中是否受支持吗？
浏览 69提问于2019-09-23得票数 4
回答已采纳
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
回答已采纳
1回答
我在react本机中是新的，我尝试用上下文包装react导航，我看到了一些用createAppContainer包装的代码，但它是react导航v4。我试着使用一些新代码，但是我遇到了错误，如何修复它。
我得到的错误是：
错误:元素类型无效:需要一个字符串(用于内置组件)或一个类/函数(用于组合组件)，但got:未定义。您可能忘记从定义在其中的文件中导出组件，或者您可能混淆了默认导入和命名导入
以下是我的实现：
Context.js
import React from 'react'
const Context = React.createContext();
ex
浏览 4提问于2021-09-19得票数 0
回答已采纳
我构建了一个ReactJS组件库，用于通过使用sim链接的NPM包安装的多个项目。我希望使用上下文API将数据从从组件库提供服务的父组件传递到我的基础项目，以供同样从组件库提供服务的多个使用者组件使用。当我尝试时，在我的子组件中上下文总是未定义的。
如果我将我的使用者组件放在我的库中的提供者组件中，它就像冠军一样工作，但这就破坏了我想要实现的目标。如果我将提供者和使用者都导出到我的基本项目中，使用者看不到提供者。
这是我的基础项目
import { Screen, COD, GenericSocketServer } from 'component-library'
expo
浏览 1提问于2019-09-17得票数 18
我试图使用上下文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
我想传递customerFlag的值，这是我在Login.jsx组件中声明的，并希望在Header.jsx中访问该值。我正在使用Context API和useContext。基本上，我是在两个组件之间传递值，您可以说是同级组件。但是problem是在UserContext.Provider value={ customerFlag }标签下得到的customerFlag值是未定义的。如果我做错了，请纠正我。我是一个反应js的初学者。
Login.jsx
import React, { createContext } from 'react';
//Creating
浏览 3提问于2021-05-08得票数 0
回答已采纳
通过REST api登录后，我使用react-router导航到某个页面。
以下是我的代码示例，尝试了以下代码：
export default {
loginUser: (jwt, rememberMe) => {
var savedJwt = localStorage.getItem('jwt');
AppDispatcher.dispatch({
actionType: 'LOGIN_USER',
jwt: jwt
});
if (savedJwt !== jwt) {
browserHistory.pu
浏览 0提问于2016-02-28得票数 3
3回答
我使用了一个添加到上下文中的方法，该方法在componentDidMount()生命周期方法中触发。
我应该能够通过提供一个对酶的shallow()方法的选项来存根上下文，但是这不会传递给我的组件。例如：
我的测试：
it('renders without crashing', () => {
const context = { dispatch: jest.fn() };
shallow(<MyComponent />, { context });
});
和我的组件：
import React, { Component } from 'r
浏览 5提问于2018-12-11得票数 2
1回答
我试图模拟单击事件并测试访问this.props和this.context的处理程序内部的逻辑，但我认为这是未定义的。有人能帮帮我吗?我做错了什么？
React组件
export default class NavButton extends Component {
constructor(props, context) {
super(props, context);
this.handleClick = this.handleClick.bind(this);
}
handleClick(e) {
e.prevent
浏览 15提问于2019-07-31得票数 0
1回答
你好，我试图把函数传递给子类，然后从子类调用它，但是它显示函数的问题是未定义的。
无法读取未定义的属性“removeComment”
这是我的密码
家长班：
import React from 'react';
import Navbar from './notes';
export default class Board extends React.Component {
constructor(props, context) {
super(props, context);
this.state = {
浏览 2提问于2017-04-09得票数 3
回答已采纳
1回答
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {Jumbotron} from 'ui-library';
import registerServiceWorker from './registerServiceWorker';
import './index.css';
ReactDOM.render(
<Jumbotron />,
document.getElementById(&
浏览 1提问于2017-08-18得票数 0
正在尝试构建reactjs应用程序。在AuthContext.Consumer中，我得到的authContext是未定义的。
已尝试记录消费中的authContext，但显示为未定义。为什么提供者没有将上下文传递给消费者？
我做错了什么？
import AuthContext from '../context/auth-context'
class App extends Component {
state = {
persons: [
{name: "John Doe", age: 20},
{name: "Neal
浏览 5提问于2021-02-16得票数 1
回答已采纳
我正在尝试为我的React组件编写测试。我得到了这个错误：
TypeError:无法读取未定义的属性“pushState”
我的代码如下所示：
"use strict";
var React = require('react');
var ProductAction = require('../actions/product');
var Router = require('react-router');
var PropTypes = Router.PropTypes;
var ImportProducts = R
浏览 1提问于2015-12-07得票数 0
回答已采纳
1回答
我需要为我的应用程序建立一个全局状态，我试图使用react，使用类组件，我跟踪了一些视频，但我不能让它按照我的需要工作，我想知道我做错了什么，不好意思，如果这个问题没有很好的结构，这是我的第一个问题。
我的代码：
/Context.jsx
import React, { Component } from "react";
const CartContext = React.createContext()
export class CartProvider extends Component{
state = {
items:[],
price:0
}
浏览 1提问于2022-09-02得票数 1
2回答
我使用query-string传递一些参数并呈现以下组件 import React, { Component } from "react";
class Show extends Component {
constructor(props,context) {
super(props,context);
this.state = {
name: ''
};
console.log(this);
}
render() {
return (
浏览 21提问于2020-04-07得票数 0
回答已采纳
"react-apollo"："3.1.5"， "react-native"："https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz“ "expo"："38.0.0“ 我正在尝试从本地asyncStorage获取url (主要是因为我的url是在登录后从两个url中挑选并分配给asyncStorage的)。下面是我已经尝试过的方法，但我总是得到未定义的数据 const asyncHttpLink = setContext(async (_,
浏览 9提问于2020-10-23得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
