问题标签 [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 投票
1 回答
952 浏览

reactjs - 重新渲染时的 useContext 值更改

所以我有一个看起来像的组件

每当组件重新渲染时,即使 someContextValue 并没有真正改变,也会触发 useEffect。

我通过使用 useMemo 来解决这个问题

const someContextValue = useMemo(useSomeContext, [useSomeContext])

现在 someContextValue 在重新渲染时不会改变。但我觉得这不太对劲。这样做的正确方法是什么?

0 投票
1 回答
875 浏览

reactjs - 使用来自 axios 的响应更新 useContext

我想使用 axios 更新上下文形式的响应,以便我可以在另一个页面上的另一个组件中使用它

当我控制台 searchData 它显示一个空数组。

0 投票
1 回答
475 浏览

node.js - React - 使用上下文传递数组变量,但是当有更新时,组件接收数组变量不会重新渲染

Context用来将exerciseList数组变量传递给 2 个不同的组件,

ExerciseList组件和Exercise组件。

Exercise组件呈现单个练习,然后 ExerciseList组件导入并实现它。

但现在的问题是,当有更新时,t.ex 练习已被删除,所以ExerciseList应该重新渲染。

但除非我刷新页面,否则它不会发生。

这是我Context

我收到这样的exerciseListinExerciseList组件

Exercise我有功能的组件delete是这样的

我想知道为什么?我将console.log(exerciseList.length > 0)ExerciseList组件放入,看看它是否捕捉到数组的变化,它没有。

帮助!

0 投票
2 回答
388 浏览

reactjs - 使用 React useContext 时如何正确定义类型接口?

我有:

当我尝试使用它时:

我收到打字稿错误:

0 投票
1 回答
1194 浏览

reactjs - 使用 React useContext 挂钩进行调度调用后,React 状态未更新

各位,这里是 React 初学者。
所以基本上,我正在尝试使用 ReactuseContext钩子获取更新的状态。

state设置在放置调度的函数调用中,并且函数调用绑定到按钮 onClick 事件 。

调用 dispatch 的函数:

减速器:

组件中的函数调用:

按钮onClick函数绑定:

我不确定发生了什么,第一次单击不会记录任何内容,但在第二次单击时,我得到了更新的位置状态。

0 投票
1 回答
32 浏览

use-reducer - 具有新顺序的数组的减速器有效负载不更新状态

首先,这是一个 CodeSandbox:https ://codesandbox.io/s/todolist-reducer-0y3mb?file=/src/context/TodosReducer.js

问题是即使我将带有新数组的有效负载传递给减速器,状态也没有更新。

我正在重新排列数组,如下所示:

然后发送它:

然后我在减速器中返回新状态。

记录有效载荷表明它是好的,但状态仍然没有更新。我正在使用 react beautiful dnd,所以也许这与它有关。

0 投票
0 回答
382 浏览

reactjs - React useContext 不会触发重新渲染

我为过滤器菜单设置了一个由三部分组成的组件。组件 A) 是 createContext,它有一个包含我的 globalData 数据的对象和一个用于更改数据的函数 setData。当 setData 被触发时,它会从数据库中检索数据并更新我的 globalData.data。组件 B) 触发组件 A 并传递适当的值(这部分有效)。组件 C) 是用于检索数据的 useContext 和用于显示数据的用户 .Provider。

问题是组件 C 不会重新渲染任何组件。

组件 A) 创建上下文和函数以更改上下文

组件 B) 触发 (A) 中的上下文更改

组件 C) 这是它不会重新渲染的地方。只想在第 2 节下重新渲染一个组件

0 投票
2 回答
7120 浏览

reactjs - 无法解构“对象(...)(...)”的属性“currentUser”,因为它为空

当我在 Next.js 中使用 react 中的 useContext() 挂钩时,我收到错误“无法解构 'Object(...)(...)' 的属性 'currentUser',因为它为空”。

这是发生错误的地方

这就是我创建上下文文件的方式

下面的错误截图 无法解构“对象(...)(...)”的属性“currentUser”,因为它为空

任何帮助表示赞赏。

0 投票
0 回答
186 浏览

reactjs - 使用useContext和状态合并两个对象?

所以我有这个问题,它没有合并两个对象,因为在渲染后调用 useEffect 时refsContext为空。它仅以对象中的一个引用结束。useEffect(() => {setRef(something)}, [ref]);导致无限的空对象循环。我错过了什么?

refs.context.jsx

多个文件的相同代码

应用程序.jsx

0 投票
1 回答
163 浏览

reactjs - useEffect 与 Context API 的依赖关系。我的代码适用于空数组,但仍然给出警告

所以。我从 context 作为 initialState 获取客户端,下面的代码来自我的列表组件(listClients.js 或 smth)。我使用从 firebase 获取的数据更新上下文。使用空数组作为依赖项,一切正常。我在列表组件中列出了我的最终数组。但是 eslint 仍然说我应该将“clientsRef”和“updateClients”添加到依赖项中,但这会导致无限循环。那我该怎么办呢?对这个警告闭上眼睛?