为什么在react上下文中没有显示该值？
在React上下文中没有显示该值的原因可能有多种可能性。以下是一些常见的原因：
- 值未正确传递：在React中，通过上下文传递值需要确保正确地传递给子组件。可能是在传递过程中出现了错误，导致值没有正确地传递到目标组件。
- 值未正确使用：即使值已经传递到目标组件，也可能由于组件内部的逻辑错误导致值没有正确地使用。可能是在组件的渲染过程中没有正确地读取该值，或者在组件的其他逻辑中没有正确地处理该值。
- 值未正确更新：如果该值是一个动态的值，可能是由于没有正确地更新该值导致没有显示。在React中，组件的状态更新可能需要使用
setState方法来触发重新渲染，如果没有正确地更新状态，可能会导致值没有显示。 - 组件未正确订阅上下文：在React中，组件需要通过
contextType或useContext来订阅上下文，以便能够获取上下文中的值。如果组件没有正确地订阅上下文，可能会导致值没有显示。
综上所述，如果在React上下文中没有显示该值，可能是由于传递、使用、更新或订阅上下文的过程中出现了错误。需要仔细检查代码，确保正确地传递、使用和更新该值，并正确地订阅上下文。
相关·内容
我不明白为什么当我点击我的应用程序中的链接时，什么也没有发生。
在我的index.js文件中，我正在加载名为“游戏”的主屏幕。在“游戏”中，我有两个链接，当点击时，应该会呈现另一个屏幕。
在我的index.js中：
import React from "react";
import ReactDOM from "react-dom";
import Game from "./Game/Game";
ReactDOM.render(
<React.Fragment>
<Game/>
</React.Fragm
浏览 13提问于2020-02-06得票数 0
回答已采纳
我不明白为什么我使用createContext和useContext在我的React应用程序中不起作用。 我的上下文文件如下所示： // @flow
import { createContext, useContext } from "react";
export type CountryIndexProviderType = {
index: number,
};
const CountryContext = createContext<CountryIndexProviderType>({
index: 0,
});
type CountryCo
浏览 21提问于2021-09-17得票数 1
回答已采纳
DataContext.js export const DataContext = createContext()
const DataContext = ({ children }) => {
const [userValue, setUserValue] = useState()
const [user, setUser] = useState()
const fetch = useCallback(async () => {
const response = await axios(Url)
setBalance(re
浏览 17提问于2021-02-03得票数 0
1回答
我在使用react上下文钩子API时遇到了问题，我通过提供程序传递了这个函数，但是子组件似乎无法运行它。
以下是我的app.js文件
// import "./App.css";
import React, {useState} from "react";
import Test from "./Test"
import {ThemeContext,ThemeUpdateContext} from "./Contexts";
function App() {
const [logged, setLogged] = use
浏览 1提问于2021-04-15得票数 0
我正在尝试调用一个初始数据函数来设置上下文中的状态。这应该使用来自组件的MetaDataData.json对象设置上下文的状态，该组件具有一些用于测试的初始值。它当前给了我一个错误： Uncaught TypeError: Cannot read property 'initialDataLoad' of undefined 我真的不确定是什么导致了这种情况，如果有任何帮助，我将不胜感激。 MetaDateContainer.js import React from 'react'
//This is a json file with some dummy d
浏览 7提问于2019-05-07得票数 1
回答已采纳
我正在使用Edamam recipe做一个菜谱应用程序，在我刷新recipe Detail page.when之前，它工作得很好。我打开一个菜谱，它工作得很好，但当我刷新页面时，例如http://localhost:3000/recipe/Pasta%20alla%20Gricia%20Recipe，它会给我一个错误： Cannot read properties of undefined (reading 'recipe') 我不知道为什么当页面没有刷新时，happening.It会工作。 App.js： import React from "react";
浏览 13提问于2021-11-21得票数 0
在React docs 中，它说：
通常，如果引用了后面没有()的方法，例如onClick={this.handleClick}，则应该绑定该方法。
我不清楚onClick={this.handleClick}和onClick={this.handleClick()}之间的区别，也不清楚为什么使用()意味着不需要绑定this。
如能在理解上提供任何帮助，将不胜感激。
浏览 0提问于2019-04-10得票数 2
回答已采纳
4回答
函数调用
、、
我试图在类中调用函数，但与下面的语法混淆。
为什么在调用函数时需要使用绑定方法？
为什么没有执行箭头函数？
import React, { Component } from 'react'
import { Text, View } from 'react-native'
//arrow function not getting executed!
myFun = data => {
console.warn(data);
}
myFun(data){
console.warn(data);
}
class Hello extends
浏览 9提问于2019-11-17得票数 1
1回答
我正在尝试创建一个节点-webkit应用程序，我想使用react.js作为我的框架。在尝试了react并创建了一些组件之后，我尝试在节点-webkit应用程序中使用它，如下所示：
'use strict';
require('react');
每当我打开我的节点-webkit应用程序(它在正文的末尾包含上面的脚本)时，我就会得到错误：
ReferenceError: document is not defined
at Object.<anonymous> (C:\Users\rtol\Dropbox\Code\Node- Webkit\Wallp
浏览 2提问于2015-04-29得票数 1
回答已采纳
2回答
我继承了一个代码库，在这个代码库中，以前的所有者广泛使用了React.Context。这导致了可能被描述为“上下文地狱”的情况。
<AppContextProvider>
<AnotherProvider>
<AgainAnotherProvider configProp={false}>
<TestProvider>
<FooProvider>
<BarProvider configHereAlso={someEnvronmentVar}>
浏览 1提问于2021-05-10得票数 9
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-select和react-bootstrap，我遇到了以下问题。我创建了一个bootstrap Card，里面有一个react-select，问题是当我打开react-select菜单时，这个菜单没有完全显示。我尝试将z索引值和位置更改为relative，但没有任何更改。这是我的问题的图片：Image import React from "react";
import Form from "react-bootstrap/Form";
import Row from "react-bootstrap/Row";
impor
浏览 55提问于2020-08-13得票数 2
回答已采纳
我在DAX Studio中创建了以下DAX查询。我想我没有很好地理解ISSUBTOTAL是如何工作的。例如： 第一行显示所有三个ISSUBTOTAL语句的true。这是一个总计，不是一年、一个月或一天的总数。 第二行显示False for Is Year total，但我希望这里显示True，因为它是年度合计。我不知道为什么是Month Total而是Day Total显示true。 最后一行显示False for Is Day total，但我认为这是True，因为这是每日合计。 ?
浏览 40提问于2019-08-30得票数 0
1回答
反应功能与“这”
、、
我知道这里的“这个”绑定和其他东西，除了一件事。我不明白为什么“这个”在第一次调用中不是没有定义的，而是第二次？
我知道函数引用，在第一种情况下，它是执行函数，而在第二种情况下，是返回引用。
import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
class App extends React.Component {
constructor() {
super();
this.name = "MyComp
浏览 0提问于2018-11-11得票数 0
回答已采纳
当我在currentUser中使用useContext()钩子时，我得到了‘Object(.)(.)’的属性‘无法重构’.(.)‘的错误，因为它是空的。
// Other imports
import CurrentUserContext from "../../contexts/current-user/current-user.context";
class Layout extends React.Component {
constructor() {
super();
this.state = {
currentUser: null,
浏览 4提问于2020-05-22得票数 0
回答已采纳
这是的后续问题
我正在使用reactjs，下面是我所做的工作:从API中检索数据并使用axios显示数据以调用API。我知道axios调用是异步的，并且是基于承诺的。
下面是抛出错误的代码：
class StudentsPage extends React.Component{
constructor(props){
super(props);
this.state = {
isLoaded: false,
studentListArray: []
}
}
componentDidMount(){
console.
浏览 0提问于2020-05-26得票数 0
回答已采纳
在React 16.4.0中，为什么要使用内置的上下文组件，而您可以使用您导入的对象文本这样的东西来完成相同的任务呢？
在Facebook的示例()中，主题-context.js文件可以直接传递对象文字，而不是使用ThemeContext。app.js代码可以读取主题上下文导出的对象文字，并将其值作为道具传递给他们使用上下文组件似乎没有必要。以下是取自的代码
theme-context.js
export const themes = {
light: {
foreground: '#000000',
background: '#eeeeee'
浏览 0提问于2018-06-13得票数 1
回答已采纳
2回答
我试图在React路由器上使用context API，但它并不像我所期望的那样工作。
这是我的Container.js文件
import React from "react"
import {Route, Switch} from "react-router-dom";
import Home from "../Components/Home/home";
import Create from "../Components/Create/create";
import Login from "../Component
浏览 5提问于2021-01-31得票数 0
回答已采纳
这是我第一次使用usecontext，我遇到了这个问题，在这个问题中，usecontext返回的是初始值，而不是传递的值。
这是我的App.js
import { useContext } from 'react';
import {userprop} from './Context'
function App() {
const value = useContext(userprop)
console.log(value)
return (
<div >
</div>
);
浏览 5提问于2022-07-22得票数 2
1回答
我有一个应用程序，用户拥有大量的配置文件信息，例如LinkedIn配置文件。我需要更新用户的个人资料。我在根级创建了一个上下文组件，即应用程序，并在多个配置文件组件中使用useContext钩子共享该上下文。用户可以从任何子组件中更改概要文件属性，如标题、概要，并更新全局上下文。当全局上下文刷新时，它将导致使用上下文的所有子组件重新呈现。如何避免在没有更改的情况下重新呈现其他组件。
这是我的代码：
profile-context.tsx
import React from 'react';
let ProfileContext = React.createContext({})
浏览 4提问于2022-03-22得票数 0
在我的react应用程序中，我使用自定义钩子从带有翻译的JSON文件中检索本地化文本。它工作得很好，但是每当我使用测试库运行希望找到文本的测试时，都找不到文本，因为在获取组件快照时，钩子没有触发并填充文本。我想知道是否有适当的方法来测试这个？
//locales JSON文件
"LABELS": {
"WELCOME": {
"title": "Welcome"
},
}
//homepage.ts
const homePageText = [
{
浏览 8提问于2022-04-14得票数 0
我试图从getDefaultProps中访问一个混合函数，但是我得到了undefined is not a function。基本上，我使用的是react-intl，我的列的默认标签应该被翻译。为什么我不能从getDefaultProps内部访问mixin中定义的函数？
var React = require('react');
var ReactIntl = require('react-intl');
var IntlMixin = ReactIntl.IntlMixin;
var Index = React.createClass({
mixins
浏览 4提问于2015-05-23得票数 1
回答已采纳
我正在用Javascript中的这个上下文进行实验，我有一个我不明白的情况。
根据从中找到的javascript的工作方式，我了解到当对一个对象调用一个函数时，该对象被隐式地作为第一个参数传入(或者在使用call方法时显式地传递)。
但有两个案例，我试图测试，但没有达到我的预期。请看后面的两行//为什么不起作用？为什么对折2的值没有定义？
下面是中的代码(也粘贴在下面)
function Beta(c, myValParam) {
var callback = c;
this.myVal = myValParam;
this.RunCallback = function () {
浏览 3提问于2013-01-14得票数 1
回答已采纳
我正在尝试访问我的Apollo客户端的setContext函数中的react上下文值。我希望能够使用react上下文值动态更新每个graphql请求的头部。但是我遇到了一个错误，日志中没有可见的错误消息。我正在尝试做的事情是可能的吗？ import React, { useState, useContext } from "react";
import { render } from "react-dom";
import ApolloClient from "apollo-client";
import { ApolloProvider }
浏览 26提问于2019-12-08得票数 8
我有一个网页应用程序，显示一些内容上说，test.com和special.test.com
我已经使用React Typescript + PWA模板设置了PWA。这两个urls上都会显示"Add to Home Screen“。
它们是阻止安装选项出现在special.test.com中的一种方法吗
self.addEventListener('beforeinstallprompt', (event) => {
const subdomainName = self.location.host.split('.')[0];
console
浏览 0提问于2021-01-08得票数 0
好的，这是相当令人讨厌的，因为我对React非常有经验，但是我很难理解为什么this.props在我的handlePress组件方法中没有被识别。
我不知道为什么我能够在以下方法中访问this.props：
renderError()
renderButton()
但是当我试图在this.props内部调用handlePress时，React说它是未定义的。在下面的代码中，您可以看到我将一个onPress处理程序附加到Button，该按钮调用handlePress。handlePress方法被正确调用，但是当我试图访问它里面的道具时，应用程序崩溃了。
除非我这样做，否则这是行不
浏览 0提问于2018-09-27得票数 1
回答已采纳
2回答
在使用时避免更改
、、
我使用上下文来表示各个组件的状态，在本例中，选中了哪个复选框，并使用该组件来更改该组件状态。但是，通过只单击一个复选框，所有四个组件(复选框)都会重发。在链接到和变异上下文时，我如何防止这种重命名？谢谢。
index.tsx:
import * as React from "react";
import ReactDOM from "react-dom";
import { ContextProvider, useMyContext } from "./context";
import "./styles.css";
cons
浏览 1提问于2020-06-04得票数 0
回答已采纳
2回答
我有一个一般性的行业问题，我似乎找不到任何详细的信息。当使用React和Redux创建用户身份验证系统时，从安全的角度来看，将用户输入的密码存储在相关的Redux还原器中是否安全？
更确切地说，当用户输入密码时，是否安全地将他们的输入存储在redux还原器中(在表单提交时，向服务器发送一个请求来验证所述用户)？如果没有，为什么？
浏览 4提问于2020-01-28得票数 3
回答已采纳
我有一个userContext文件：
import React from 'react'
const userContext = React.createContext({ loggedInUser: {} })
export { userContext }
我在App中正确地提供了一个值
import { userContext } from './../contexts/UserContext'
class App extends Component {
//...
componentDidMount = () =&
浏览 5提问于2020-12-12得票数 3
回答已采纳
有关使用Perl CGI模块的问题：
假设我有一个名为foo的子程序，它接受两个参数，定义如下：
sub foo {
local($a, $b) = @_;
print "a= [$a]";
}
在我的主要例程中，我采取一些表单参数，并将它们传递给foo，如下所示：
use CGI;
$cgi = CGI->new;
foo($cgi->param('field1'), $cgi->param('field2'));
如果表单没有传入field1的值(在我的示例中，使用了一个名为field1的SELECT字段，没有值
浏览 0提问于2013-09-07得票数 1
回答已采纳
我试图将值从上下文提供程序传递给使用者，但它没有显示任何内容。
我在StackOverflow上看到了很多关于React上下文不起作用的问题，但我没有发现任何可以帮助我的问题。我使用Consumer，我尝试在div中包装提供者(它帮助了某人，但我没有)，ContextTypes不是这样的，因为它是一个遗留文档，没有错误的导入-导出错误，没有拼写检查错误，没有关于上下文的控制台错误或者被动地影响上下文。我做了一切，像在上下文教程视频，适应我的项目。
我在data.js中有一个‘data.js’，我需要通过：
export const productTemplate = [
{
i
浏览 2提问于2019-09-30得票数 0
回答已采纳
我刚开始使用React和，我想知道为什么我的上下文提供程序似乎没有将新的值传递给子组件。我将其设置为初始值"ColorContext“为'red‘，但我希望按钮中的"ColorContext”值为’绿色‘。但是，当我尝试这样做时，"ColorContext“值不会改变，并且保持”红色“。
下面是我的代码的链接：
import React, { Component, useState, useContext, createContext } from 'react';
import { render } from 'react-dom
浏览 0提问于2019-07-25得票数 4
回答已采纳
我一直在跟踪一些使用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
回答已采纳
1回答
我遇到了一个很奇怪但看起来很简单的问题。
我确实有一个名为vatRates的对象，它如下所示：
const vatRates = {
"AD": 0.00,
"CZ": 1.21,
"RO": 1.19,
"DE": 1.19,
"RS": 0.00,
"RU": 0.00,
"SE": 1.25,
"SI": 1.22,
"SK": 1.20,
"TR": 0.00,
"UA"
浏览 4提问于2022-04-21得票数 2
回答已采纳
1回答
我正在学习一个教程，我对有一个问题
我的上下文组件如下所示
import React from 'react'
export const firebaseAuth = React.createContext()
const AuthProvider = props => {
const { children } = props
return (
<firebaseAuth.Provider
value={{
test: 'context is working',
}}
>
浏览 4提问于2020-06-22得票数 0
回答已采纳
2回答
这是我第一次在应用程序中使用React钩子，我正在尝试设置SelectedBackgroundContext，它不会更新。console.log(typeof selectBackground)确实显示为一个函数，所以我认为它导入正确，并且不确定为什么它没有更新。
我的所有代码都可以在下面的CodeSandbox链接中找到。我遇到的问题是child.js:8。
儿童
export default function Child() {
const { selectedBackground } = useContext(SelectedBackgroundContext);
const {
浏览 4提问于2021-11-14得票数 1
在使用react路由器时，我将导入useNavigate，v6 "react-router-dom": "^6.3.0"如下：
import { useNavigate } from 'react-router-dom';
在函数中，我使用以下代码导航：
{
title: (
<FormattedMessage
id="pages.apps.cruise.channel.searchTable.subName"
defaultMessage="Rul
浏览 10提问于2022-04-30得票数 -1
我想在一个反应js中显示来自数据库的内容
React JS出现以下错误：
Error: Parse Error: Line 27: Unexpected token . at http://localhost/PHP-React-Demo/ajax_call.html return {cell.data.row}
我的代码是：
Index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tr
浏览 2提问于2015-12-09得票数 0
我还是JavaScript和ReactJS的初学者。
我有一个列表，显示用户输入的一些数字。我想知道的是如何添加数组+中存在的当前值，即用户键入的新值。
例如，如果我的数组中有一个数字5，并且用户键入数字3，我希望添加这些值并将它们显示给用户。通过图像更容易解释：
然后我的代码。
添加新值
import React from "react";
import { AppContext } from "../../providers";
const Add = () => {
const { dispatch } = React.useC
浏览 4提问于2021-01-18得票数 1
回答已采纳
在研究React时，我遇到了以下代码块
this.timerID = setInterval(
() => this.tick(),
1000
);
在这里，setInterval的第一个参数是返回tick()函数的函数。如果我将setInterval的第一个参数替换为this.tick，它就不能工作(也就是说，时钟停止滴答作响)。而它只用于传递函数。为什么会这样呢？
接受一个函数。为什么我们必须传入一个返回函数的箭头函数？
浏览 0提问于2018-10-01得票数 0
回答已采纳
1回答
带IIFE的逗号运算符
、、、
在react库中，在定义useSelector的文件中，我发现了与IIFE一起使用的逗号操作符的多个实例，其方式如下：
var _useReducer = (0, _react.useReducer)(function (s) {
return s + 1;
}, 0),
forceRender = _useReducer[1];
var subscription = (0, _react.useMemo)(function () {
return (0, _Subscription.createSubscription)(store,
浏览 3提问于2022-04-16得票数 1
回答已采纳
我正在写一个React应用程序，它应该从服务器获取数据(二进制pdf)，并在新的选项卡/窗口中显示为PDF。我知道如何找出显示部分，问题是我的代码中对新创建的窗口的引用丢失了。当您将以下文件放入普通的create-react-app项目并导入它时，您将看到变量_window将在Chrome和Firefox上返回新的窗口对象，但在Windows7 (IE11)和Windows10 (MS Edge)上将返回null。
import React, { Component } from 'react';
export default class Container extend
浏览 2提问于2017-04-11得票数 1
1回答
自定义验证指令异步调用实时验证
、、、、
我使用自定义验证指令来验证表单中的字段，验证过程包括一个AJAX调用，用于使用服务器API验证用户信息。只要用户在一段时间内停止输入，我们就想验证该字段。
我有两个问题：
1.为什么下面的函数不能工作？(在自定义指令中有链接函数)无论我输入多少次绑定输入字段(我很肯定我启用了日志消息显示，因为其他日志都是相互关联的)，日志消息从未显示过。
scope.$watch(attrs.ngModel, function() {
$log.debug("Changed to " + scope.$eval(attrs.ngModel));
});
2.检测用户已经停止
浏览 2提问于2014-07-25得票数 0
1回答
对于JS对象，我有一个奇怪的错误，它是这样的：
function MatchManager(){
this.current_m = [];
}
MatchManager.prototype.addMatchBatch = function (array){
// yes I could do an apply..
for(var i = 0; i < array.length; i++){
this.current_m.push(array[i]);
}
}
但是，当我对addMatchBatch的一个实例调用MatchManager时，
浏览 3提问于2015-11-08得票数 0
回答已采纳
1回答
我在这里有一个非常简单的代码片段，但无论我使用哪个编辑器(Webstorm、VSCode)，我都会在搜索栏的"onChangeText“属性下得到红色下划线，并显示以下消息：
TS2322: Type '(val: string) => void' is not assignable to type '((text: string) => void) & ((text: string) => void) & (() => any) & (() => any) & (() => any) &
浏览 314提问于2021-06-12得票数 1
回答已采纳
3回答
根据
当组件上面最近的<MyContext.Provider>更新时，此钩子将触发一个重命名器，其最新的上下文值将传递给该MyContext提供程序。即使祖先使用React.memo或shouldComponentUpdate，从组件本身开始使用useContext仍会发生重发事件。..。当上下文值发生变化时，调用useContext的组件总是会重新呈现。
在我的Gatsby JS项目中，我将我的上下文定义为：
Context.js
import React from "react"
const defaultContextValue = {
data
浏览 6提问于2020-01-20得票数 1
回答已采纳
我正在尝试理解格式化上下文和内部和外部显示类型之间的关系。
一方面，W3和相关网站的官方解释说，所有的框都有格式上下文。它们或者创建一个，或者继续它们的父级中的一个，这也创建了一个格式化上下文，或者继续它的一个父级，依此类推，直到由HTML元素建立的初始块格式化上下文。
块格式化上下文中的元素根据块格式化上下文规则进行布局。因此，这意味着，当您在另一个div中插入div时，子div将根据块格式设置上下文规则进行布局，因为其父div具有块格式设置上下文规则。
那么为什么带有display:inline或inline-flex的元素没有按照块格式化上下文规则进行布局呢？
该解释指出，内部显示类型定
浏览 0提问于2020-09-18得票数 0
3回答
对象数组中的一个循环
、、、
我有一个用于数据的JSON文件：
{
"EIC": {
"id": "EIC",
"text": "Want to do a quick word game?",
"replies": ["Sure", "Later"]
},
"YMB": {
"id": "YMB",
"text": "Okay, tomorrow. Cya!",
浏览 0提问于2018-09-07得票数 2
1回答
-Hello，伙计们，我遇到了一个花了很多时间研究的问题，但我没有找到解决办法：
->here我有两个独立的组件header.jsx(包含booking.com主页克隆)和hotel.jsx，我希望使用上下文将包含搜索数据的状态从头发送到酒店并使用减缩器。我声明了一个单独的上下文文件searchcontext.js，导出了上下文及其提供程序，使用index.js中的提供程序包装了应用程序，并在header.js中调用调度函数以发送所需的状态，当我在hotel.js中调用useContext以使控制台返回未定义的状态时，请提供任何帮助:)
index.js
import React
浏览 0提问于2022-10-20得票数 0
回答已采纳
我有一个React上下文，用于管理我的应用程序中的身份验证。我以前已经这样做了，看起来一切都还好，但是在这个应用程序中，isAuthenticated属性的值没有被更新。我尝试过使用CodeSanbox进行复制，但是我得到了预期的结果。
本质上，我希望上下文保存一个isAuthenticating: true值，直到身份验证流完成为止，一旦完成，我将通过检查isAuthenticated === true && authenticatedUser !== undefined来确定用户是否经过身份验证，但是，状态似乎没有得到更新。
作为这方面的附加内容，我使用的是涡轮回购和nex
浏览 14提问于2022-09-10得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
