问题标签 [use-context]

In my project, there are several elements rendered in the page. I've been using useContext to update certain elements when changes occur. For example, when the user edits a role with the EditRole component, the updatedRole context is set to that role's new value. The RoleList component has a useEffect that runs when updatedRole changes. It checks if the context has an id attribute. If it does, it searches the list for the old role and updates it. Afterwards, the context is set an empty object, the same as its default value.

However, there are cases in which the two useStates that should run based on the same context. The problem is that I'm not sure if, by setting a context to an empty object in one useEffect, the other one will be affected. And if it isn't affected, I won't be sure if that was just an exception (like, if was a variation in processing speed or order, or something of the sort).

Do the multiple sets make any difference, and, if it does, what should I do?

Here is the part of the code in RoleEdit.js that sets the context.

Here is the part of the code in RoleList.js that uses the context.

嘿伙计们，我目前正在尝试使用钩子和 useContext 进行身份验证

我在这个文件中定义了 useContext：

在我的路由器文件中，我以这种方式设置了 useContext：

现在在我的登录功能中，我的 handleSubmit 出现问题，由我的表单触发（我的后端调用和获取所有工作都很好）：

在const session = ...我得到我的帐户数据时setUser(session)

我收到以下错误： login.js:25 Uncaught (in promise) TypeError: setUser is not a function

谁能帮我？我试图解决这个问题几个小时我读到钩子不应该在任何地方使用，但我猜一个处理提交的函数很好，对吧？

我也尝试将代码直接放在onSubmit中：

如果 React Context API 旨在用于传递全局变量，我们为什么要使用它们来代替从父组件到子组件的传递道具（道具钻探）？由于大多数被传递的道具并不意味着在应用程序范围内可用，即全局可用。

TestContext.js

测试组件.jsx

测试组件1.jsx

应用程序.js

步骤：打开 http://localhost:3000/ test，点击提交按钮，console.log 打印错误，在不同的选项卡中打开 http://localhost:3000/ test1，点击提交按钮，console.log 打印错误（为什么仍然是假的。是否更改了 TestComponent 中的值？）

然后在调用“checkoutDrawer.toggleCheckoutDrawer()”后添加console.log，如下所示，

现在 console.log 打印 false false。（为什么 checkoutDrawer.toggleCheckoutDrawer() 之后的 console.log 也打印错误？）

请帮助我，我的代码完全搞砸了，我收到了这个错误，我无法解决它。

我知道这个问题有几个答案，但它们并没有解决我的问题。我是新手，无法找到正确的代码。

早上好，

我正在将应用程序从道具钻孔转换为 useContext 并且遇到了一个奇怪的问题。我分配给道具的功能被视为作为钻孔道具的功能，但在从创建的上下文中拉出时不会。在相同的上下文中，我还有其他可以正常工作的功能。您将在下面找到与问题相关的组件部分：

根组件：

用户组件：

作业组件：

上下文文件：

将代码更改为您在上面注释掉的代码会导致以下错误：

TypeError: selectJob 不是 onClick (Jobs.js:44) 的 jobClickedHandler (Jobs.js:14) 的函数...

我在做什么导致 setJobState 不被识别为函数但 setUserState 是？

如果我需要包含更多代码，请告诉我。

提前致谢。

我正在尝试为一个小项目设置主题提供程序。每次用户单击按钮时，应用程序主题（颜色）都应该改变。假设我在一个单独的文件中有四个主题，如下所示：

每次用户单击按钮（嵌套在特定组件中）时，计数器都会递增，直到 3，如下所示：

计数器似乎工作正常，但问题是我永远不会回到我的第一个对象值（我永远不会回到第一个主题颜色）。我的意思是当我console.log(state.count, state.primaryColor, state.secondaryColor)得到这个时：

你知道为什么每次计数器值回到 0 时，第一个对象值都会被最后一个对象值覆盖吗？

希望有人能指出我正确的方向。基本上我已经创建了一个使用钩子的反应应用程序，特别是 useContext、useEffect 和 useReducer。我的问题是我似乎无法进行测试来检测相关组件的点击或调度事件。

可以在以下位置找到我的应用程序的精简版本：https ://github.com/atlantisstorm/hooks-testing 测试与 layout.test.js 脚本相关。

我尝试了各种方法、模拟调度、useContext 等的不同方式，但对此并不满意。最新版本。

layout.test.js

布局.jsx

应用程序.jsx

上下文.jsx

减速器.jsx

我确信当我看到它时答案会很容易，但只是想弄清楚我可以检测到点击事件并检测到“调度”事件吗？（我已经在主应用程序中进行了单独的测试，以正确测试调度响应/操作）

先感谢您。

编辑 好吧，我想我有一个合理但不完美的解决方案。首先，我刚刚向 context.jsx 模块添加了可选的 testDispatch 和 testState 道具。

新上下文.jsx

然后在 layout.test.jsx 中，我只是简单地传入模拟的 jest 调度函数和必要的状态。还移除了外部 App 包装，因为这似乎可以防止道具通过。

新的 layout.test.jsx

但是，如上所述，有一点需要注意，当“获取事物按钮”被触发时，它会以错误的顺序报告调度。：/所以我只是决定知道触发的正确呼叫，但如果有人知道为什么呼叫顺序不符合预期，我会很高兴知道。

https://github.com/atlantisstorm/hooks-testing更新以反映上述内容，如果有人感兴趣的话。

我们的 React 应用程序中有一个变量：

1. 在 中定义为全局状态App.js，通过其 setter 方法全局传递给其他组件GlobalContext.Provider，和
2. 单独用作许多应用程序路由的路由参数。

下面是我们App.js文件相关部分的简短代码片段：

competition全局状态有键value和label，然后competitionIdurl 参数中的competition.value值与值相同。

的全局状态值旨在使用小部件在组件competition中进行更改。当这个小部件被切换时，全局状态被更新，并且钩子用于将应用推送到新路由，使用更新设置url 参数。<Navbar>selectuseHistorycompetition.valuecompetitionId

competition我们应用程序中的许多组件都需要for 的值，包括那些没有 url 参数的组件（例如在<HomePage>组件中）。出于这个原因，我们觉得它需要作为一个全局变量，传递给所有其他组件。这对我们来说也很方便，因为该变量可以在任何地方通过useContext钩子轻松访问。

但是，我们的 url 参数中似乎也需要该值。这些组件根据competitionId传递的数据获取不同的数据，它们在 url 参数中是应用程序路由的很大一部分。

那么我们的问题是用户可以手动更改网站的 url，这可以更改 url 参数而无需更改变量的全局状态。通过手动更改 url，而不是使用select小部件，全局状态和 url 参数然后不同步......

编辑：这是select我们用来切换competition值的组件（抱歉帖子越来越长）。这个选择在我们的导航栏中，并且在我们之外是全局可访问的<Switch>：

这个组件在技术上确实解决了if, if else, else子句中的不同步问题，但是无论何时setCompetition(correctGlobalState)调用，React 都会抛出以下警告消息：

Warning: Cannot update a component (应用) while rendering a different component (比赛). To locate the bad setState() call inside 选择比赛选择, follow the stack trace as described...

我的应用程序包括以下内容： 这是一个使用 MERN 堆栈的应用程序，目标是让用户能够登录、注册和查看联系人。（这只是为了练习，我没有部署它的计划）。

当用户登录时出现问题，然后转到联系人，我可以控制台记录它们，从后端的 Express 获取它们，但我无法显示它们。最重要的是，当我 console.log 长度时，它显示为 0，即使当我 console.log 数组显示项目时，它也是我无法理解的。

这是 App.js

如您所见，我正在使用 React 路由器，这里首先是 Register.js

这是 LogIn.js：

在这里您可以看到我正在使用 Context Hook，这是我创建它的文件 (UserContext.js)：

最后，这是我的 Contact.js：

在这里，forEach 循环不起作用，我不知道为什么，因为当我打印联系人数组时，我完全得到了它们。

这是我在控制台中得到的：

我没有从后端提供文件，因为如您所见，问题显然出在前端，因为我正在获取数据，但没有正确显示它。