React中的createContext/ useContext未按预期工作
在React中，createContext和useContext是用于在组件之间共享数据的两个重要的Hooks。createContext函数用于创建一个上下文对象，该对象包含一个Provider组件和一个Consumer组件。Provider组件用于提供共享数据，而Consumer组件用于消费共享数据。
当createContext和useContext未按预期工作时，可能有以下几个原因：
- createContext未正确创建上下文对象：在使用createContext函数时，需要确保正确创建了上下文对象。例如，可以使用以下方式创建上下文对象：
const MyContext = React.createContext();- Provider未正确提供共享数据：在使用Provider组件时，需要确保正确提供了共享数据。共享数据可以通过Provider组件的value属性传递给子组件。例如：
<MyContext.Provider value={sharedData}>
{/* 子组件 */}
</MyContext.Provider>- Consumer未正确消费共享数据：在使用Consumer组件时，需要确保正确消费了共享数据。可以通过在Consumer组件内部使用函数的方式来获取共享数据。例如：
<MyContext.Consumer>
{value => (
{/* 使用共享数据 */}
)}
</MyContext.Consumer>- 组件层级关系错误：当使用useContext钩子时，需要确保组件层级关系正确。useContext只能在Provider组件的子组件中使用。如果组件层级关系错误，可能无法获取到正确的共享数据。
总结起来，当createContext和useContext未按预期工作时，需要检查上下文对象的创建、Provider组件的提供共享数据、Consumer组件的消费共享数据以及组件层级关系等方面是否正确。如果问题仍然存在，可以进一步检查代码逻辑和调试错误。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云云服务器（CVM）：提供弹性计算能力，满足不同规模业务的需求。产品介绍链接
- 腾讯云云数据库MySQL版：提供高性能、可扩展的关系型数据库服务。产品介绍链接
- 腾讯云对象存储（COS）：提供安全、稳定、低成本的云端存储服务。产品介绍链接
- 腾讯云人工智能平台（AI Lab）：提供丰富的人工智能服务和开发工具，帮助开发者构建智能化应用。产品介绍链接
- 腾讯云物联网平台（IoT Hub）：提供全面的物联网解决方案，帮助连接和管理物联网设备。产品介绍链接
- 腾讯云区块链服务（Tencent Blockchain）：提供安全、高效的区块链解决方案，满足不同行业的需求。产品介绍链接
- 腾讯云视频处理（VOD）：提供视频上传、转码、剪辑、播放等功能，帮助开发者实现视频处理需求。产品介绍链接
相关·内容
2回答
如何从Reactjs中的类组件导出上下文？
javascript、reactjs
我在从组件导出上下文时遇到问题。包含上下文的组件如下所示。
import React, { Component, createContext} from 'react';
export const MyContext = React.createContext('');
export default class ComponentOne extends Component {
....
....
render(){
return(
<MyContext.Provider value={'value1
浏览 25提问于2019-11-26得票数 4
1回答
使用时，无法获取数据
reactjs
这是我的App.js，我使用的是上下文api，但是我无法在{context.country}和{context.job} (子组件即邻居)中获取数据。这是我的App.js，我使用的是上下文api，但是我无法在{context.country}和{context.job} (子组件即邻居)中获取数据。App.js
import React, { Component } from 'react';
import Neighbour from './Neighbour';
const MyContext = React.createC
浏览 0提问于2018-06-21得票数 1
回答已采纳
1回答
未能从React.Context API获取提供程序数据
reactjs
我正在尝试学习用于react的上下文api，但我想我对它的一些原则感到困惑。我跟着的嘟嘟声根本不起作用。我的反应是正确的。
Context.js
import React, { Component } from "react";
const MyContext = React.createContext();
export default class MyProvider extends Component {
state = {
userName: 'Kelly'
};
render() {
return(
<
浏览 3提问于2018-06-04得票数 0
回答已采纳
1回答
如何通过React上下文更新状态？
reactjs、typescript
下面是一个使用React上下文的简单示例：
type MyState = { counter: number };
const MyContext = createContext<[MyState, () => void]|undefined>(undefined);
class MyComponent extends Component<any, MyState> {
constructor(props: any) {
super(props);
this.state = { counter: 42 };
}
render() {
浏览 13提问于2022-05-19得票数 0
回答已采纳
2回答
如何在上下文中存储函数调用
javascript、reactjs、react-context
我想要做的是用一个状态和一个更新该状态的函数初始化我的上下文。
例如，假设我有以下内容：
export default function MyComponent () {
const MyContext = React.createContext()
const [myState, setMyState] = useState('1')
const contextValue = {
currentValue: myState,
setCurrentValue: (newValue) => setMyState(n
浏览 4提问于2022-07-27得票数 0
2回答
React:为什么我的上下文值没有更新？
javascript、reactjs、jsx、react-context
我在玩。我创建了一个简单的组件：
import React, { createContext, useContext } from 'react';
const MyContext = createContext(1);
const MyComponent = () => (
<>
<p>{useContext(MyContext)}</p>
<MyContext.Provider value={2}>
<p>{useContext(MyCont
浏览 0提问于2020-12-29得票数 4
回答已采纳
1回答
获取api并使用上下文api发送状态
reactjs
这是下面的App.js，在获取数据和setState时，我无法在子目录中显示日期，但是我的数据是在控制台日志中获取的。就连我都把MyContext放在单独的文件里
//App.js
class MyProvider extends Component {
state = { userData: '' }
componentWillMount() {
fetch('https://randomuser.me/api/')
.then(res => res.json())
.then(userData =>
浏览 1提问于2018-06-23得票数 0
2回答
setState与onClick在消费者内部
javascript、reactjs、react-context
我已经实现了React，并且我正在尝试通过子组件中的onClick函数更新提供者内部定义的状态。
这就是我到目前为止在App.js中所做的工作：
import { createContext } from 'react';
const MyContext = React.createContext();
export class MyProvider extends Component {
state = {
currPrj: ''
}
handleBtnClick = prjCode => {
浏览 1提问于2019-03-20得票数 7
回答已采纳
5回答
未定义的React上下文返回
reactjs
我使用React将一些状态传递给不同的子组件，并返回undefined。
父组件：
export const UserContext = React.createContext();
export class Provider extends Component {
state = {
editGroup: false,
}
render() {
return (
<UserContext.Provider value={{
state: this.state
}}>
{this.props.chi
浏览 0提问于2018-12-14得票数 18
回答已采纳
2回答
如何以编程方式提供和使用上下文？
javascript、reactjs、jsx、react-context
所以我的问题很简单。在React js中，我希望使用上下文将一些状态和处理程序从父进程传递给第三个孙子进程。我已经在jsx中实现了这一点，但是我想使用javascript o中的状态，在我完全输出我的状态之前，我有一些逻辑。我把我的问题分成两个部分。1.)我到目前为止所做的一切。2.)本质上我想做的是。
1.)
//该文件只存储上下文MyContext.js
import React, { Component } from 'react';
export const MyContext = React.createContext();
MyProvider.js //父级和子
浏览 0提问于2020-02-04得票数 1
1回答
React Router: TypeError: render不是函数
javascript、reactjs
我正在开发这个应用程序，当我运行npm start时，我一直收到这个错误："TypeError: render is not a function“。我已经厌倦了从删除依赖项到运行npm install的所有工作。我甚至多次更新react-router-dom和react-dom。我在这里迷路了。
以下是存储库的GitHub
代码如下：
index.js
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react
浏览 0提问于2018-11-03得票数 1
5回答
如何从使用者更新提供者中的上下文值？
javascript、reactjs、react-context
MyContext.js
import React from "react";
const MyContext = React.createContext('test');
export default MyContext;
我在一个分离的js文件中创建了我的上下文，在这里我可以访问我的父组件和子组件。
Parent.js
import MyContext from "./MyContext.js";
import Child from "./Child.js";
class Parent extends Component
浏览 0提问于2018-05-24得票数 117
2回答
单元测试:使用酶的react context api返回一个空对象
reactjs、unit-testing、jestjs、enzyme、react-context
我第一次尝试使用React context API将信息从主组件传递到孙组件。 因此，首先我创建了一个上下文 const MyContext = React.createContext({});
export default MyContext; 下面是设置上下文值的主要组件 import MyContext from "./MyContext.js";
import ParentComponent from "./ParentComponent.js";
function App() {
return (
<div>
浏览 15提问于2019-04-17得票数 6
回答已采纳
3回答
响应上下文和单独的类
javascript、reactjs
我已经放弃了让mt绕着Redux (我是新的反应)的希望，并看到Alpha版本的React提供了一个新的上下文。
所以我试着学习它，我的目标是，我有一个Navbar，我想回应我的上下文中的一个状态，{isAuthorised: false}。
我在跟踪
但他把所有的代码都放在一个文件里。我正试着做得“对”。
我所做的是创建了一个名为“context”的文件夹，并在其中创建了一个名为provider.jsx的jsx。
import React, {Component} from 'react';
export default class MyProvider extends
浏览 0提问于2018-03-25得票数 8
1回答
错误: React和useReducer中未定义
javascript、html、reactjs、use-reducer
我正在尝试用useContext和useReducer创建一个redux模式。我创建了一个创建上下文( reducer)的组件，并且我还具有初始值。我用前面的内容声明我的还原，并返回到减速器的值所提供的子组件。然后，在下一个映像中，我有一个视图，该视图将呈现一个构成表单的组件，并将其包装在ExpenseReducer组件中，从而使其具有my reduce的值。
在表单中，我导入上下文并尝试使用分派，但是我得到了一个类似于“未定义”的错误。
我的密码
import React from "react";
//Context
export const Expen
浏览 8提问于2020-02-05得票数 0
1回答
访问由Context.Provider传递的值的Context.Consumer与useContext()
reactjs、react-hooks
<MyContext.Consumer>
{value => { }}
</MyContext.Consumer>
VS
let value = useContext(MyContext);
使用Context.Consumer和使用useContext钩子来访问上下文提供程序传递的值，这两个代码片段之间有什么区别？我认为useContext将订阅上下文提供程序，因为我们将上下文作为参数传递，因此当提供程序值更改时，它将触发重新呈现。
浏览 1提问于2019-06-29得票数 40
回答已采纳
1回答
useContext(上下文)在中显示警告
reactjs、react-native、react-hooks、react-context
我已经使用React Context API钩子在反应本机。我创建Consumer和Provider都是为了将道具和状态从父传递到子。代码工作得很好，我收到了父母给孩子的道具。
我在我的控制台上收到了以下警告：-
警告:不支持调用useContext(Context.Consumer)，可能会导致错误，并将在以后的主要版本中删除。您是想调用useContext(上下文)吗？
请检查以下添加的代码：-
我已经创建了公共上下文文件CommonContext.js。
import React, {createContext} from 'react';
const MyConte
浏览 3提问于2019-12-28得票数 0
回答已采纳
2回答
"this.context“返回空对象
javascript、reactjs
我不知道为什么：
我的反应是16.8x
我在提供者和使用者之间有一个组件，以避免上述两个元素之间的循环调用。
我希望我的上下文可以在生命周期组件中直接访问，并看到ReactJS提出了this.context的方法。
我的
这里是我的反应片段
import React, {Component}from "react";
import "./App.css";
// first we will make a new context
const MyContext = React.createContext();
// Then create
浏览 0提问于2019-02-10得票数 2
回答已采纳
1回答
在同级组件中响应不起作用的上下文状态共享
javascript、reactjs、react-component
我有一个简单的ToDo应用程序，其中有一些组件。我想要做的就是共享状态和更新上下文数据。我可以用道具来做这件事，但是在将来，如果我有更多的组件，那么用道具传递数据就太麻烦了。这是我的密码。
MainContext.js
import React, { createContext, useState } from "react";
const MainContext = createContext([{}, () => {}]);
const MainContextProvider = (props) => {
const [state, setState]
浏览 1提问于2020-09-06得票数 1
回答已采纳
1回答
在组件中调用`React.createContext()`有任何实用的方法吗？
javascript、reactjs、react-context
假设我想为一个“手风琴”(一组可折叠的面板)创建一个UI组件。父组件控制打开面板的状态，而子面板应该能够读取上下文以确定是否打开。
const Accordion = ({ children }) => {
const [openSections, setOpenSections] = useState({})
const isOpen = sectionId => Boolean(openSections[sectionId])
const onToggle = sectionId => () =>
setOpenSections({ ...o
浏览 1提问于2020-01-30得票数 7
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
