问题标签 [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.

0 投票
0 回答
1086 浏览

reactjs - React Router 和 useContext 不能一起工作

当我尝试读取数据时,除了我的 SwitchRouter.tsx 之外,它已成功登录到每个文件的控制台中,我不知道为什么。我要做的是获取 user(isLogin) 的值并基于该值有条件地渲染组件。(如果用户已登录,则用户可以访问 UserContact、UserPosts 和 AboutMe,如果用户未登录,则他只能访问 HomePage)

导航栏.tsx

为什么仅在 SwitchRouter.tsx 中不显示任何内容?以及如何获得用户的价值以将其用于条件渲染?

这是片段 在此处输入图像描述

0 投票
0 回答
68 浏览

reactjs - 我如何解决意外令牌

我正在使用反应钩子(useContext)创建一个 toast 包,但它在应用程序中工作直到发布并且我得到了意外的令牌 [1]

![1]: https://i.stack.imgur.com/mBOpk.png

0 投票
1 回答
1324 浏览

reactjs - 无法使用“useContext”挂钩破坏上下文提供程序中传递的值

沙盒中的代码:https://codesandbox.io/s/goofy-dhawan-n2kk2?file=/src/components/NavBar.jsx

错误:TypeError: Cannot destructure property 'books' of 'Object(...)(...)' as it is undefined.

0 投票
1 回答
731 浏览

react-redux - 在哪里使用 React 中的 Hooks 定义需要来自全局状态的数据的套接字事件侦听器

我一直在学习钩子,但一个概念仍然让我感到困惑。

使用 useEffect 时,内部声明的任何变量在下一次重新渲染后都会变旧。要访问 useEffect 中不断变化的值,最常见的答案,也是Dan Abramov 自己使用的一个方法,是改用 u​​seRef 挂钩。

但是,假设您想使用 Redux 之类的东西将一条信息存储在全局状态中,但您还希望该信息在 useEffect 内部的回调函数中可用。在我的特定情况下,当我的组件挂载时,我需要将事件侦听器添加到连接到服务器的 Web 套接字,以发出 WebRTC 连接的信号。Web 套接字侦听器回调函数所需的值将在整个应用程序的使用过程中更新。

如何组织一个全局可访问的状态,但也可以像访问 useRef 生成的 ref 一样被引用?

这是我的意思的一个例子

当客户端从服务器收到他们可以开始广播的响应时,客户端需要准确反映哪些用户在使用应用程序的整个过程中登录。显然,此时的值users是陈旧的,因为即使来自 useSelector 的值也不会在 useEffect 内部更新,尽管它在外部。所以我可以在这里使用 useRef 来实现我想要的,但这不是我使用 users 数组的唯一地方,我不想一遍又一遍地传递一个 ref 作为道具。

我已经阅读了有关使用 useContext 的信息,但是,如果我理解正确,当上下文值发生变化并且整个应用程序正在使用上下文时,就会为整个应用程序触发重新渲染。

有什么想法、建议、解释吗?除了 useEffect 之外,也许还有更好的地方可以将事件侦听器添加到套接字?

提前致谢。

0 投票
2 回答
1070 浏览

reactjs - 数据更改时使用 useEffect() 进行更新的正确方法

下面的 useEffect 渲染、获取数据并显示一次(使用空数组作为 useEffect 中的第二个参数)。

每次用户将数据更改到数据库时(当用户使用 axios.post 时),我都需要它重新运行 useEffect。

我试过的

  • 使用 [tickets],但这只会导致 useEffect 无限运行
  • 也使用 [tickets.length] 和 [tickets, setTickets]
  • 尝试使用道具作为参数,但没有发现任何有用的东西

 

0 投票
2 回答
17497 浏览

reactjs - React - 类内的useContext

我是新手,我想在课堂上使用 useContext,我该如何解决?这是我当前代码的示例

我对我的班级也有同样的期待

任何人都可以启发我吗?

0 投票
0 回答
507 浏览

javascript - ContextAPI 在页面重新加载和在新选项卡中打开时丢失状态

我正在创建一个配方应用程序并使用上下文 API 来确保我从 API 调用中获取的数据在我的所有组件中都可用。乍一看,一切正常。

问题是,当我在新选项卡中重新加载/打开一个组件(这些取决于从上下文提供者传递的状态)时,一切都会因为状态为空而中断。

我检查了堆栈溢出的答案,但它们似乎都没有提供一个不是 hacky 的答案。有没有人有关于如何让我的数据在重新加载后保留在 contextApi 上的任何提示?

由于此问题而损坏的组件示例如下所示

0 投票
1 回答
181 浏览

reactjs - createContext 钩子不适用于 JSP 中的反应组件

我正在使用现有的 JSP 页面中呈现我的反应组件

反应组件如下:

而MyStore如下:

但我收到了这个错误: 在此处输入图像描述

还有一件需要注意的重要事情是,当我尝试在另一个现有的反应组件之上渲染这个反应组件时,我没有收到任何错误并且一切正常。

有人可以解释一下可能导致问题的原因吗?

0 投票
1 回答
360 浏览

javascript - UseReduce Hook dispatch 两次-ReactJS

我开发了一个小应用程序,目的是研究反应钩子。该应用程序包括在一个部分中写入艺术家的姓名。在下一部分,一个类似的表格,用于填写每个艺术家的专辑。

我将所有组件以及上下文、状态和减速器都分开了。我对每个艺术家、专辑和歌曲都有单独的上下文。当我单击艺术家按钮时,我想过滤专辑以便只出现他们的专辑。但是使用减速器调度两次,在控制台日志中它告诉我两者都来自减速器文件。

有趣的是,第一次点击时,我只经过一次,但第二次我看到我选择了两次调度艺术家。

另一个有趣的事情是,当我更改选定的艺术家时,它会删除状态专辑,这是我拥有所有专辑的地方。它不会过滤它们,但会删除它们。

GitHub存储库

这是我单击以调用每个艺术家的 id 并将当前选择的艺术家发送到艺术家上下文和专辑上下文的表单

第二个是 ALBUMSTATE,我调用函数 getArtist 来调度并获取该选定艺术家的所有专辑

这是 ALBUMREDUCER

0 投票
1 回答
925 浏览

reactjs - 在上下文/提供者反应原生的异步函数中初始化状态

我正在使用上下文挂钩来处理本机反应中的状态。我想通过执行 API 调用的异步函数初始化状态,然后通过 useState 返回初始状态。那是我尝试为“touristyOptions”设置初始状态,但这不起作用。我怀疑它是由于异步功能?

This does not work. Anyone can give a hint?

12345678910