问题标签 [use-context]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
reactjs - 即使在反应钩子中使用 useContext() 后,值也不会传递和显示
我useContext()
用来获取类似name and photo
in的值Navigation.js
。我已经设置了<UserProfileContext.Provider value={{ updateProfile, setUpdateProfile}}>
in Profile.js
。但是仍然没有在 Navigation.js 中显示值 >> {updateProfile.name}|
App.js
Navigation.js
context.js
Profile.js
reactjs - useContext 值在页面刷新和注销期间被清除
更新配置文件时,profile.name
通过useContext()
navlink (Navigation.js) 显示。但是一旦页面被刷新或在注销期间 profile.name 被清除,也profile.photo
不会在 navlink 中显示。
我想始终在导航链接中显示名称和照片,我该怎么做。?
UserProfileProvider.js
Navigation.js
App.js
Profile.js
reactjs - 在尝试将图像从 res.data.photo 传递给 useContext 时,我收到无法读取未定义的属性“数据”
我得到了,无法读取未定义错误的数据。我在这里所做的只是res.data.photo
试图useContext(UserLoginContext)
从Login.js
. 我需要在Navigation.js
src={dataImage},{loginImage}中显示图像
未处理的拒绝(TypeError):无法读取未定义的属性“数据”
Login.js
UserLoginProvider.js
context.js
Navigation.js
reactjs - 我们如何处理带有文件路径的图像并在反应挂钩中转换为 base64
image with path
如果我们在 React Hook 中以以下格式 接收,我们如何处理并转换为 base64 :images\photo-1592376542020.JPG
UserLoginProvider.js
Navigation.js
reactjs - 本地主机存储
所以下面的代码是我试图在localStorage
页面刷新之后保持用户状态的方式。
这基本上适用于主页,每当我刷新时,我都会看到localStorage
即使刷新确实仍然存在。但是,当我通过与网页交互并在该页面上刷新时,我会丢失localStorage
我通过 react useContext 函数传递用户状态(其设置器是 setUser)。有兴趣听听任何人的想法。谢谢!
reactjs - 从登录名通过useContext传递图像时,图像未显示
在登录中的 onSubmit 期间,我做了setLoginPhoto(res.data.photo)
然后使用useContext()
将照片信息传递给导航。但显然,一旦登录成功并显示主屏幕,照片信息就会被清除。还有 loginPhoto.photo,仅照片是undefined
,但我可以在loginPhoto
将鼠标悬停在其上时查看图像详细信息。
单击登录时,我设置了各种断点,并看到图像信息实际上被传递UserLoginProvider
到Navigation
. (请参阅截图)
注意:使用 multer 保存到数据库的图像文件路径,即 [ var imagePath = req.file.path;
] 并且图像显示在其他屏幕中,例如 Home、Profile 屏幕。
一步一步:
按登录,我可以看到里面loginPhoto
有UserLoginProvider
图像(请参考截图)
现在我可以loginPhoto
在导航中看到可用的:
但是一旦登录成功并显示主页,loginPhoto
就会变为 null 并且图像不会显示在导航中。有关如何解决此问题的任何建议?
Login.js
UserLoginProvider.js
Navigation.js
App.js
home.js
reactjs - 基于类的 Context.Provider 和 UseContext 工作示例
我遇到了一个场景,其中我完全使用 React hooks 来制作一个应用程序。
我不得不在应用程序中使用某些与钩子不兼容的 NPM 库。为了避免道具钻孔,我打算使用 useContext。因为我的一些使用非钩子兼容的 npm 库的组件必须是基于类的。
使用 React-context api 和 useContext 是明智的选择之一。
以下是一个非常基本的示例,适用于任何尝试将 useContext 作为上下文消费者和上下文提供者一起使用的人。
javascript - 上下文 API 中的 React useState 值始终使用初始值而不是更新值
我正在使用 Context API 来存储全局值,例如 userId,以便在整个应用程序的组件之间共享。
这是 context.js 的样子:
基本上,我试图使用一个大上下文来保存我一起使用的所有值,并在子组件中访问它们,如下所示:
问题是,setter 函数中的“状态”变量似乎没有更新,当我尝试像上面那样设置新值时,其他值会被其初始值覆盖(例如,userId 得到更新,但其余值返回 null),我想我一定做错了什么,但我仍然不知道。
任何建议将不胜感激。
javascript - 在反应中丢失页面刷新时的组件数据
我正在做一些我需要维护应用程序级别状态的事情,即全局状态,我正在为此使用反应钩子useContext
和useReducer
.
所以我正在做的是点击按钮,我正在设置我的上下文,然后通过在我的App.js
.
我知道我为什么要使用我的数据,因为我首先将初始状态设置为 null,这就是为什么当我刷新页面时它再次设置为 null,但我的要求不是在单击按钮后我想将该数据存储为全局状态,以便我可以进一步使用它
但这不应该是我想让我的数据全球化并且在刷新时它不应该丢失的情况
我的代码
我的上下文文件
我设置上下文的家庭代码
还有我的 app.js 文件
请检查工作代码我的代码和框链接
请检查反应开发者工具
reactjs - React Native 上下文内容不断回来
我想使用useContext
、useReducer
和清除用户并在 React Native 中注销useMemo
。
我的应用程序(AuthContext)中有用户屏幕(UserContext)。
UserContextclearUsers()
有useMemo
AuthContextlogout()
内有useMemo
如果我这样做,UserContext 的内容将被清除:
但是当我在 clearUsers 之后或之前添加注销时,userContext 内容在重新登录后不断返回。
有人经历过吗?请指教。