React useContext挂钩:重新加载页面时上下文变为空
React useContext是React框架中的一个Hooks函数，用于在函数组件中获取并共享上下文（context）的值。上下文是React中一种跨组件层级共享数据的机制，可以避免props层层传递的繁琐和组件间的紧耦合关系。
当重新加载页面时，整个React应用会重新渲染，这意味着所有的组件都会重新创建和挂载。在重新加载页面时，上下文的值会被重置为空。
上下文的值可以通过使用React的Context API进行设置和获取。通过useContext挂钩函数，可以在函数组件中获取上下文的值，并在组件中使用它。但是当重新加载页面时，上下文的值会被重新初始化为空。
重新加载页面时，如果需要保留上下文的值，可以考虑使用其他数据持久化方案，例如本地存储（LocalStorage）或服务器端存储（数据库）。这样在重新加载页面后，可以通过读取持久化的数据来还原上下文的值。
需要注意的是，上下文的值的持久化和重新加载页面时的处理是应用级别的问题，而不是特定于React的功能。在实际开发中，可以根据具体需求选择适合的数据持久化方案，并通过使用React的生命周期方法或其他技术手段来实现。
相关·内容
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
我们可以避免使用空数组作为钩子中的第二个参数进行不必要的useEffect计算：
// that will be calculated every single re-rendering
useEffect(() => {...some procedures...})
// that will be calculated only after the first render
useEffect(() => {...some procedures...}, [])
但是，对于我们不能像上面那样做的useContext钩子，提供第二个参数。而且，我们不能用useCallback，us
浏览 1提问于2019-06-09得票数 0
我试图复制一个个人项目，以便在加载数据获取时设置一个旋转加载器，但我之前又遇到了另一个错误。 我在其他问题中读到，比如this one，为了避免useEffect()无限循环，我必须在末尾添加一个空数组，但它仍然不起作用。 这是我的代码，它只是无限地重新渲染，尽管添加了空数组。 src/组件/Users.js import React, { useState, useEffect, useContext } from "react";
import GlobalContext from "../context/Global/context";
export
浏览 26提问于2019-12-23得票数 3
回答已采纳
我一直在尝试使用React Native中的上下文钩子，但它似乎不起作用，它返回未定义。但是，当我使用<Context.Consumer>时，它确实工作得很好，你知道useContext在React Native中是否受支持吗？
浏览 69提问于2019-09-23得票数 4
回答已采纳
我需要这个问题的帮助，我的应用程序组件，如下图所示。我想在单击view details按钮时使用useState将跟踪对象inselectedTrack存储在状态中。然后使用它来显示跟踪详细信息，而不是从API中进行另一次提取来获取大头针详细信息，但当我在内部使用useContext时，请给我这个错误的TypeError: Cannot read property 'selectedTrack' of undefined。
import React from 'react';
import Header from './Header';
im
浏览 1提问于2020-02-06得票数 3
1回答
我有一个页面，它通过一个id加载一个随机获取的视频，在一段延迟后，比如说5秒，它会将我重定向到另一个页面。这个“其他页面”也做同样的事情，从不同的播放列表加载视频，然后将用户重定向到第一个页面，依此类推。问题是，在第二次重定向和所有其他重定向时，页面加载了一个新视频，但不会停止播放前一个视频。在这一点上我感觉我已经尝试了所有的方法:我尝试了在视频上使用.pause()方法，我尝试在重定向之前将视频替换为和空的div，通过使用url中的参数加载视频，并实现上下文api(react)来重新洗牌一组预先加载的视频，并且只显示一个接一个，我将非常感谢您的帮助。索引页： function Index(
浏览 37提问于2021-08-03得票数 0
我正在做一个react redux web应用程序，在那里我需要一些受保护的路径，我已经看过很多关于如何做它的教程，但是它们不适用于新版本的react路由器-dom，我觉得我非常接近于实现它，但是有一些东西不起作用，当我刷新页面时，我将auth值设置为false，我不得不再次登录，我如何解决它？这是我的密码。
useAuth.js文件
import React from "react";
const authContext = React.createContext();
function useAuth() {
const [authed, setAuthed] =
浏览 5提问于2021-12-21得票数 1
2回答
im试图创建一个具有标头值的api请求，该请求是从上下文组件接收的。但是，一旦加载了页面组件，它就会抛出一个Cannot read property '_id' of null异常。是否有一种方法可以在上下文加载后立即运行useEffect函数？
主要组件：
import React, { useState, useEffect, useContext } from "react";
import "./overview.scss";
/* COMPONENTS */;
import axios from 'axios';
im
浏览 0提问于2020-02-13得票数 7
回答已采纳
页面加载后，我需要从URL获取值并将其发送到API，但因为父对象中的状态正在更改，所以进行了3次api调用。我希望它只调用一次API。
import React, {useContext, useEffect} from 'react';
import Context from '../components/context';
import {RouteComponentProps} from 'react-router-dom';
interface MyProps {
confirmationCode: string,
}
const
浏览 3提问于2019-09-09得票数 0
在重新加载页面后，我的AuthContext会发生变化。我在用typeScript。<AuthProvider>在我的航线上
以下是我的createAuth代码：
import { createContext, ReactNode, useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import bcrypt from 'bcryptjs'
export const AuthContext = createCon
浏览 4提问于2022-07-26得票数 0
我目前正在尝试传入一个用于正向地理编码的位置，但我不知道为什么我的调用似乎会触发无限循环。 我尝试使用地图传入位置，然后在代码中的其他地方使用来自API的响应。 这是我的数据提供者..。 import React, {
useEffect,
useState
} from "react"
export const GeoCodeContext = React.createContext()
export const GeoCodeProvider = (props) => {
const [latLong, setLatLong] = useState(
浏览 11提问于2020-09-23得票数 0
回答已采纳
我有一个表单，它有一组复选框、单选按钮和一个按钮。 每次更新复选框或单选按钮的值时，它都会调度一个更新状态的事件。我可以通过单击我的按钮组件<Button context={ExampleContext} />来查看此状态 然而，我似乎不能在父容器中通过添加相同的代码片段来访问我的状态，因为它只是返回未定义的，这是我在我的Button组件中拥有的相同逻辑，所以我不确定为什么它不能工作。 很明显我做错了什么，但我不确定是什么。如何从父容器中访问我的state？ 这里还有一个可用的示例：https://codesandbox.io/s/elegant-minsky-0i4yx 谢谢你
浏览 8提问于2020-03-27得票数 1
回答已采纳
我希望在我的应用程序的不同部分重用上下文提供程序(“高级组件”)，但是我的状态不会被更新。
这是提供者的包装器。
import React, { FC, useState } from "react";
import AdminContext from "./adminContext";
const AdminContextWrapper: FC = ({ children }) => {
const [authAdmin, setAuthAdmin] = useState<boolean | null>(null);
cons
浏览 5提问于2022-02-17得票数 0
回答已采纳
我有一个useLocalStorage钩。如果我在组件中直接使用它，当我试图更新值时，我得到一个错误，setValue不是一个函数。实际上还没有定义。
这是代码片段
// https://github.com/Ibaslogic/localstorage-react-hook-project/blob/main/src/useLocalStorage.js
import { useState, useEffect } from "react";
function getStorageValue(key, defaultValue) {
// getting stored
浏览 6提问于2022-09-29得票数 0
我正在尝试使用React中的新useContext函数。在无状态功能组件中工作得很好。例如：
import React from 'react';
import LocaleContext from '../LocaleContext';
const Link = ({ text, url }) => {
const locale = useContext(LocaleContext);
return (
<a href={`/${locale}/${url}`}>
{text}
</a>
浏览 1提问于2019-02-15得票数 14
回答已采纳
我正在开发一个使用React的网站。在使用useContext()和useLocation()时，我得到了这个错误。
import React, { useContext } from "react";
import Layout from "../components/Layout";
import { LangStateContext } from "../context/LangContext";
import { useLocation } from 'react-router';
const PricingPage
浏览 9提问于2021-11-30得票数 2
我将Home组件包装在以下布局中：
export const DataContext = React.createContext({});
const Layout: React.FunctionComponent = (props) => {
const data = {title: "abc", description: "def"};
return (
<DataContext.Provider value={data}>
{props.children}
</DataContex
浏览 2提问于2019-02-20得票数 6
import React, { useContext } from 'react';
useContext is undefined.
错误详细信息：
Uncaught (in promise) TypeError: Object(...) is not a function
处理错误
const context = useContext(UserContext);
目前的反应版本：
"react": "^16.7",
"react-dom": "^16.7",
浏览 1提问于2018-12-22得票数 2
回答已采纳
我试图传递我在setting.js中设置的值，并通过使用react上下文概念将其传递给我的所有子节点。
下面是我所有的密码。
thingscontext.js (这是我创建上下文对象的地方)
import React from "react";
const ThingsContex = React.createContext({});
export const ThingsProvider = ThingsContex.Provider;
export default ThingsContex;
setting.js (我的自定义提供者)
import React, {
浏览 2提问于2021-10-15得票数 1
1回答
我有一个加载用户数据的用户上下文。我使用这些数据在useEffect中发送API请求。数据加载中的时间差导致API请求中出现一个未定义的变量。如何让useEffect在发送请求之前等待加载上下文变量？
这是UserContext.js：
import { createContext, useState } from "react";
const UserContext = createContext({});
export const UserProvider = ({ children }) => {
const [user, setUser] = useSta
浏览 10提问于2022-08-24得票数 -1
我刚刚开始学习React.js，所以这个问题可能很愚蠢。 当我刚开始学习React时，我试图基于用户与页面上元素的交互来触发函数。而这些功能在很大程度上依赖于状态更改。所以我实现了useContext钩子。基本上，我成功地构建了一个带有3个导航链接的web应用程序，当每个链接被点击时，相应的页面就会显示出来，而不需要实现react-router-dom……(所以URL不会改变)因此，很大程度上依赖于状态的改变来切换不同的页面。 然后我学会了React Router。这立即使useContext在我之前的道具传递切换页面结构中变得多余。我想，也许是天真的，哇，如果我可以通过依赖于由NavLin
浏览 21提问于2020-04-20得票数 0
回答已采纳
很抱歉，我发现React Native令人困惑不已，令人费解。我使用下面的代码作为一个'helper‘脚本来保存可以被单独的组件访问的对象值。 LogContext.js import React, { useState } from 'react'
export const LogContext = React.createContext({
set: "en",
login: "false",
setLog: () => {},
});
export const LogContextProvider = (pr
浏览 9提问于2020-08-13得票数 0
1回答
我将客户端设置的配置设置存储在本地存储中。当有人更新一个值时，我们将其保存到本地存储中。当他们加载页面时，我们从本地存储中获取它。粘性状态的代码是： import React from 'react';
export default function useStickyState(key, defaultValue) {
if (!process.browser) {
return React.useState({})
}
const [value, setValue] = React.useState(() => {
浏览 19提问于2021-04-15得票数 1
当用户登录时，我使用上下文状态变量来存储我的令牌值。在我的应用程序中使用这个标记。当我登录时，令牌将登录在登录页面上。但是，即使我在所有文件中使用上下文，它也会在其他页面上提供空值。
AuthContext.js
export const AuthContext = createContext();
export const AuthProvider = (props) => {
const [authToken, setAuthToken] = useState("");
const [authProtected, setAuthprotected] = us
浏览 1提问于2022-01-30得票数 0
2回答
如下所示，我有一个基本的react上下文设置。 我的愿望是，使用上下文的子组件应该只在上下文数据更改时重新呈现，但我发现情况并非如此。 如果我更新与上下文没有关联的调用setData2，则会在Container上触发状态更新，随后会触发重新计算，并导致使用子进程进行更新。 有问题的子组件已经在使用React.memo，所以只有当它的useContext钩子引导它更新时，它才会更新。但是，即使data1保持不变，当Container更新时，上下文也会更新。 有没有可能解决这个问题？ const Container = () => {
const [data1, setData1] =
浏览 24提问于2020-09-15得票数 0
如何在旧的react组件中使用useContext？它在打印时显示空{}
import { UserContext } from "../../firebase/user";
export class CreateProduct extends Component {
static context = UserContext;
render() {
console.log(this.context)
}
}
浏览 0提问于2020-10-07得票数 0
1回答
我正在PC组件中更改PC，但它没有反映在BR1组件中。如果我不使用反应性路由器，一切正常，但我需要路线。
App.js代码
import React, { createContext, useState } from 'react';
import './App.css';
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import BR1 from './Components/BR1';
import PC from
浏览 3提问于2022-06-19得票数 -1
回答已采纳
在这个例子中，我使用memo来防止组件重新渲染，但是，即使项目属性没有改变，它也会在每次单击按钮时重新渲染。根据react文档，只有当道具被更改时，带有备忘录的组件才不会重新呈现。
import React, { memo, useContext } from "react";
import { BasketContext } from "./Context";
const ItemCard = React.memo(({ item }) => {
const [basket, setBasket] = useContext(BasketContex
浏览 6提问于2021-06-01得票数 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
回答已采纳
1回答
我有一个简单的ToDo应用程序，其中有一些组件。我想要做的就是共享状态和更新上下文数据。我可以用道具来做这件事，但是在将来，如果我有更多的组件，那么用道具传递数据就太麻烦了。这是我的密码。
MainContext.js
import React, { createContext, useState } from "react";
const MainContext = createContext([{}, () => {}]);
const MainContextProvider = (props) => {
const [state, setState]
浏览 1提问于2020-09-06得票数 1
回答已采纳
我对react了解不多，但现在我有了一个简单的API，希望通过选择特殊组件中的语言选项来接收不同语言的数据。
LanguageSelect.js：
import React, { useState } from "react";
import { useLanguage } from "../context/Language";
import { Route, useHistory } from "react-router";
const LanguageSelector= () => {
const { language, setL
浏览 0提问于2021-04-04得票数 2
2回答
我正在处理对页面的安全访问，检查用户经过身份验证并被批准查看页面的位置。如果用户未被验证且未被批准，则应将其重定向到各自的页面。
我已经用还原器实现了useContext来存储状态。下面是用于适当重定向用户的私有路由的代码。
import React, { useContext } from "react";
import { Route, Redirect } from "react-router-dom";
import AuthContext from "../../context/auth/AuthContext";
const Pri
浏览 2提问于2021-06-29得票数 0
我目前正在关注Robin Wieruch的“与Firebase反应的道路”一书。我遇到的问题是，当我刷新一个从Context API消费的页面时，来自Firebase的authUser变成了空。 这是我的app.js import Navigation from './Navigation';
import LandingPage from './Landing';
import AccountPage from './Account';
import withAuthentication from './withAuthenticat
浏览 10提问于2019-02-02得票数 0
回答已采纳
1回答
使用react挂钩 经历了一个奇怪的bug，似乎导致了某种无限循环或其他什么。以前有没有人遇到过这样的事情。 这就是我所拥有的： import { createContext, useState, useCallback } from "react";
export type ModalValue = string | null;
const DEFAULT_ACTION = null;
export const useModalContext = (): ModalContextContents => {
const [
modal,
set
浏览 27提问于2021-01-06得票数 0
1回答
我试图为portfolio制作电影应用程序，我得到了一个带有一些数据的api，我尝试用useEffect获取它，然后设置状态，我还使用useContext钩子将数据传递给孩子的道具，但是数据是空的。
我是App.js
import "./App.css";
import { useEffect, useState, createContext } from "react";
import Axios from "axios";
import { Main } from "./components/Main/Main";
expo
浏览 2提问于2022-11-24得票数 -1
1回答
react上下文的实现不起作用
、、、、
我使用react上下文来在组件之间共享用户名。我有3页：-app.js -signIn(用户名被更改的地方)-page1(其中我想看到更新的用户名)
正如本教程(和许多其他vidoes)所说的那样，我做了：
在我的app.js中，我用以下方式定义了状态：
const [user, setUser] = useState();
return (
<Router>
<Switch>
<UserContext.Provider value={{us
浏览 1提问于2021-05-24得票数 0
回答已采纳
我正在使用React的上下文api来存储一组项。有一个组件可以通过useContext()访问这个数组，并显示数组的长度。还有另一个组件可以访问该函数，以便通过useContext更新此数组。将项添加到数组中时，组件不会重新呈现以反映数组的新长度。当我导航到应用程序中的另一个页面时，组件重新呈现并反映数组的当前长度。每当上下文中的数组发生变化时，我都需要重新呈现该组件。
我尝试过使用Context.Consumer而不是useContext，但是当数组改变时，它仍然不能重新呈现。
//orderContext.js//
import React, { createContext, useSt
浏览 1提问于2019-09-08得票数 10
回答已采纳
我无法在我的app.js中设置上下文状态，我在其中得到了一些空值，但是可以在子组件中访问它。
每当用户访问页面时，我都希望在app.js中设置上下文状态，以便我可以在整个应用程序中使用它，例如，根据用户是否登录显示不同的标题。
请求的SandBox URL ->
我在跟踪
app.js
// import installed dependencies
import React, { useEffect, useContext } from 'react';
import { BrowserRouter as Router, Switch, Route } from &
浏览 3提问于2020-06-30得票数 2
1回答
我有一个使用mapbox地图的应用程序，我正在尝试从另一个单独的卡组件中调整视口。我这样做的方式是创建一个viewport上下文，并将viewport和函数传递给map和card组件。
这是可行的，但我遇到了重新命名的问题。每当用户在地图上滚动时，视图端口就会不断变化，因此viewport提供程序中的所有内容都会不断地重新命名。代码的简化版本如下
应用程序
<ViewportProvider>
*Container that holds both the map and the sidebar that renders the card components*
</Vi
浏览 1提问于2022-01-02得票数 3
回答已采纳
3回答
我已经设置了一个使用上下文来存储页面标题的基本示例项目，但是当我设置它时，组件不会重新呈现。
主体文件：
Context.js
import React from 'react'
const Context = React.createContext({})
export default Context
AppWrapper.js
import React from 'react'
import App from './App'
import Context from './Context'
function AppWrap
浏览 0提问于2020-03-16得票数 10
回答已采纳
<MyContext.Consumer>
{value => { }}
</MyContext.Consumer>
VS
let value = useContext(MyContext);
使用Context.Consumer和使用useContext钩子来访问上下文提供程序传递的值，这两个代码片段之间有什么区别？我认为useContext将订阅上下文提供程序，因为我们将上下文作为参数传递，因此当提供程序值更改时，它将触发重新呈现。
浏览 1提问于2019-06-29得票数 40
回答已采纳
3回答
我正在做一些我需要维护应用程序级状态的事情，即全局状态，我正在为那个useContext和useReducer使用react。
因此，我所做的是点击按钮，我正在设置我的上下文，然后使用它，通过在我的App.js中注册提供程序来思考我的应用程序。
我知道为什么要使用我的数据，因为我首先将初始状态设置为null，这就是为什么当我再次刷新页面设置为null时，但我的要求并不是在单击按钮之后，我希望将数据存储为全局状态，以便进一步使用它。
但是，这不应该是我想要使我的数据全局化的情况，在刷新时，它不应该丢失。
我的代码
我的上下文文件
import React, { useReducer, creat
浏览 4提问于2020-06-20得票数 6
1回答
我已经创建了一个切换开关，从黑暗模式转变为光模式。我试图添加样式，这将改变fill: ""的svg时，我点击切换。path:first-child是上面的图标，path:last-child是底部的图标。
import { ReactComponent as ModeIcon} from '../../../assets/icons/mode-icon.svg';
import styled from 'styled-components';
import ThemeContext from "../../../store/th
浏览 3提问于2022-04-12得票数 0
回答已采纳
我在我的Ionic React应用程序中添加了一个包含useReducer钩子的上下文。我看到了一些奇怪的行为:当我用一个dispatch调用更新上下文值时，将在页面上更新一个使用者组件，但是选项卡栏上完全相同的组件不会被更新。
我跟踪了。
当我添加console.log语句以检查组件是否被重新加载时，我看到放置在选项卡栏(<TabBarCounter>)中的组件没有被重新加载，即使上下文值已经改变。
当我在上下文提供程序中添加console.log语句以检查是否重新呈现时，我发现在调用dispatch时它也不会重新呈现。
似乎上下文正在本地更新，而不是在全球范围内更新。在中有一个
浏览 2提问于2021-08-05得票数 2
回答已采纳
你好，我的代码有问题，我有一个银行项目，我需要在本地存储中保存特定的用户，因为如果我重新加载页面会导致错误，所以我需要保存它，问题是用户的初始状态是空数组，所以它添加到本地存储，但是在页面重新加载后，inital状态返回空数组，如果我将用户的初始状态上的本地存储获取项，我会得到错误，因为我的特定用户搜索它会得到错误，因为它会查找数组。
import { useContext, createContext, useState, useEffect } from "react";
import axios from "axios";
import { useTran
浏览 2提问于2022-10-11得票数 1
React具有上下文的原因是允许多个兄弟组件共享一段状态数据。它是允许两个不相关的组件读/写共享变量的首选方法。之所以需要这样做，是因为如果不在屏幕之间传递数据，React无法轻松地将一个数据值传递给多个屏幕。相反，它允许每个屏幕在需要时访问数据。
所以..。该实现要求创建一个称为Context.Provider组件的组件，然后必须包装需要访问Context.Provider中共享数据的组件。但是为什么呢？为什么这是一个需求？Context的设计目的是在没有层次关系的组件之间共享数据，并且需要将组件放在一个层次结构中才能做到这一点？
如果简单地去掉使用Context.Provider的要求，让
浏览 31提问于2019-11-24得票数 14
我正在尝试创建一个从API中获取数据的React项目，并且我试图从外部文件中使用useReducer钩子和useContext。文件夹结构：
publicsrc (在src文件夹中，除了其他组件和其他files)package.json之外，还有context.js和reducer.js。
reducer.js：
const reducer = (currentState, action)=>{
switch(action.type){
case 'setBreedList':
// console.log('
浏览 2提问于2021-06-27得票数 0
回答已采纳
我正在尝试使用React从其他子组件中动态更新navbar标题。我创建的NavbarContext.js如下所示。我用NavContext.Provider包装了NavContext.Provider，并在Course.js中使用useContext动态更新useEffect中的导航栏标题。但是，当我这样做时，应在屏幕上抛出以下错误。
元素类型无效:预期为字符串(用于内置组件)或类/函数(用于组合组件)，但未定义。您可能忘记从定义在其中的文件中导出组件，或者您可能混淆了默认导入和命名导入。
如何正确使用上下文，以便从Course.js更新其useEffect中的标题
NavbarContex
浏览 1提问于2020-01-26得票数 0
回答已采纳
1回答
我是新来的。在我到目前为止发现的示例中，使用创建自己的上下文对象并将其作为值传递给提供程序等。所有示例似乎都将整个上下文(作为一个对象或其各个部分的总和)存储在状态中，并将其用于请求。但是物体的寿命是多少呢？它是仅在页面刷新期间创建一次，还是在每个呈现周期中重新创建，从而只能通过useState或useRef生存？换句话说，实际上需要useState来存储呈现周期之间的上下文数据，还是useState仅用作订阅更改的一种方式？
这就是我根据我见过的教程创建上下文的方式.
(要明确的是，我的问题是关于context.js中的“context.js”对象的生存期，以及重命名器或状态更改或其他生命周
浏览 3提问于2022-10-27得票数 1
回答已采纳
我有一个从UserPage到外部身份验证服务的有条件重定向，如下所示。条件是，如果我的UserContext不包含user对象，那么页面将被重定向到https://urltoauthenticate:5000/user以进行用户身份验证。条件在第一次运行中得到满足，并转到身份验证服务
但是这个问题发生在成功的身份验证之后。在成功进行身份验证的情况下，即使UserContext提供了user对象，它在第一次呈现时也将为空。在这里，我如何等到user对象可用并准备就绪，这样页面就不会再次被重定向到身份验证服务？
import React, { useEffect, useContext } fro
浏览 5提问于2021-05-23得票数 5
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
云直播
对象存储活动推荐
腾讯云开发者
