问题标签 [use-state]
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 - 如何在状态重置后将下拉选择器重置为其默认值?当我使用下面的事件处理程序时,它不会恢复
------------------form jsx--------------
------------------------------------表单提交------------------------ ---
javascript - React 组件有时会在状态不变的情况下渲染两次
我正在使用 Redux 订阅商店并更新组件。
这是一个没有 Redux 的简化示例。它使用模型商店进行订阅和分发。
请按照片段下方的步骤重现问题。
编辑:请跳到更新下的第二个演示片段,以获得更简洁和更接近现实生活的场景。问题不在于 Redux。这是关于 React 的 setState 函数标识在某些情况下导致重新渲染,即使状态没有改变。
编辑 2 :在“更新 2 ”下添加了更简洁的演示。
怎么了
- ✅ 单击“设置为是”。由于 的值
yes
已经是“yes”,状态没有改变,因此组件不会重新渲染。 - ✅ 点击“切换”。
yes
设置为“否”。状态已经改变,所以组件被重新渲染。 - ✅ 单击“设置为是”。
yes
设置为“是”。状态再次改变,所以组件被重新渲染。 - ⛔ 再次单击“设置为是”。状态没有改变,但组件仍然重新渲染。
- ✅ 后续点击“设置为是”不会按预期导致重新渲染。
预计会发生什么
在第 4 步,不应重新渲染组件,因为状态未更改。
更新
正如React 文档所述,useEffect
是
适用于许多常见的副作用,例如设置订阅和事件处理程序...
一个这样的用例可能是监听浏览器事件,例如online
和offline
。
在这个例子中,我们在组件第一次渲染时调用内部函数useEffect
一次,方法是传递一个空数组[]
。该函数为在线状态更改设置事件侦听器。
假设,在应用程序的界面中,我们还有一个按钮可以手动切换在线状态。
请按照片段下方的步骤重现问题。
怎么了
- ✅ 组件首先呈现在屏幕上,消息记录在控制台中。
- ✅ 点击“切换”。
online
设置为false
。状态已经改变,所以组件被重新渲染。 - ⛔ 打开开发工具并在网络面板中切换到“离线”。
online
was alreadyfalse
,因此状态没有改变,但组件仍在重新渲染。
预计会发生什么
在步骤 3 中,不应重新渲染组件,因为状态未更改。
更新 2
怎么了
- ✅ 单击“设置为是”。由于 的值
yes
已经true
是 ,因此状态不变,因此不会重新渲染组件。 - ✅ 点击“切换”。
yes
设置为false
。状态已经改变,所以组件被重新渲染。 - ✅ 单击“设置为是”。
yes
设置为true
。状态再次改变,所以组件被重新渲染。 - ⛔ 再次单击“设置为是”。尽管组件通过调用函数开始渲染过程,但状态没有改变。尽管如此,React 会在流程中间的某个地方退出渲染,并且不会调用效果。
- ✅ 后续点击“设置为是”不会按预期导致重新渲染(函数调用)。
问题
为什么组件仍然重新渲染?我做错了什么,还是这是一个 React 错误?
javascript - 如何在加载器中使用 setTimeout
我有一个简单的功能组件,我单击一个按钮并显示它,我试图让我的导入微调器在单击按钮时显示 2 秒,然后在两秒后显示我的导入组件,但是我只能让微调器在单击按钮后显示 2 秒并且无法停止
工作示例可以在这里找到:https ://codesandbox.io/s/gallant-engelbart-y3jus
reactjs - useState 只是第一次改变了值
我的钩子 useState 只更改一次状态,我一直有 1. 我该如何解决?
reactjs - ReactJS - 传播运算符语法+钩子函数错误
我是 Web 开发的新手,并且处于不知道在进行 Web 搜索时使用哪些词的不舒服区域。我对课程的了解不多,因为我的老师告诉我们要避免使用它,不幸的是,我找到的唯一答案与课程有关。我正在尝试将排序功能应用于数据表,并且仅在我尝试的最开始,但在两件事上苦苦挣扎:
将 API 对象分配给我的组件中的 const。(我正在使用扩展迭代器,它可以工作,但是当我在挂钩中使用它时不起作用 - 例如 - 'useState({...data})'。当我不使用扩展运算符时,它显示“未定义”。所以现在我正在单独创建“排序,setSort”,但是将我的“统计”对象分配为值也返回未定义。有人可以解释一下这种数据通信是如何工作的吗?
当我的 'sortBy' 函数被触发时,我收到一条错误消息,说“ setSort不是一个函数”。它是函数中的一个钩子,所以我对此很困惑??
显然我的代码还不是很好,希望你能理解!
reactjs - setState 钩子不会改变从孩子调用的状态
我在组件中使用钩子来管理模态状态。(类版组件重现该问题)handleClick 将打开模式,handleModalClose 应该关闭。
我将 handleModalClose 发送到 Modal 组件,并且使用 console.log 可以看到它已被处理,但 isModalOpen 状态没有改变(回调 setState 相同)。当我尝试使用 setTimeout 调用它时 - 状态更改并且 Modal 正在关闭。
为什么当我调用从孩子改变时状态没有改变???
这是模态的摘录
reactjs - 为什么在使用空数组作为第二个参数的 useEffect 中声明时,我的 websocket 侦听器只触发一次?
我正在使用 React、Socket.io 和 Express 构建我的第一个 websocket 应用程序。我也一直试图以此为契机学习 Hooks API,但事实证明这有点棘手。
我在仅在第一次渲染后运行的 useEffect 内的客户端应用程序中的套接字上建立了一个侦听器(我将一个空数组作为第二个参数传递给它)。当用户从该客户端应用程序登录时,侦听器工作,但是当打开第二个窗口并从不同的连接登录时,它不会再次为该应用程序注册。第二个窗口具有来自服务器的正确用户数组。
我正在寻找有关为什么我的应用程序会以这种方式运行的解释。我已经阅读了一个建议,在这种情况下我应该使用 useReducer 而不是 useState ,但我不确定这会有什么不同,因为console.log
在我的套接字上事件侦听器的回调中仍然没有注册任何东西。即使在示例中,作者仍在解释应该更改状态并触发重新渲染。尽管我在 useEffect 中使用了一个空数组作为第二个参数,但这并不重要,因为事件侦听器是在那里建立的。
我已经避免了编写多个打开和关闭连接或重新编写多个事件侦听器的 useEffects 的情况。
我在页面顶部建立连接:
我在这里使用 useState 创建状态:
然后我使用我的第一个 useEffect 挂钩来检查 localStorage 中的登录用户,并在套接字上添加一个事件侦听器:
如上所述,当用户使用表单登录或在 localStorage 中找到时,侦听器第一次完美运行。它向服务器注册,服务器发出“backendUsers”,通知刚刚发生了更新。但是,当我在另一个(隐身)窗口中添加另一个用户时,尽管在第二个用户登录时发出“backendUsers”,但不会再次捕获侦听器。第二个窗口具有最新的用户列表,但在第一个窗口我希望更新的用户数组登录到控制台以及重新渲染,显示状态已更新并且用户在 DOM 中正确列出。
这是我的整个前端代码:
这是服务器端代码(我在这里使用 Express.js)。要观看的主要听众是login
:
reactjs - React Hooks:如何正确设置 useEffect 来处理表单中字段状态的更改?
我正在尝试创建一个通用表单组件来处理登录案例、注册案例等。我在登录案例中大声笑,尽管usernameError
状态达到 false ,但我注意到了,即用户继续输入什么是实际的电子邮件,错误信息将持续存在:
我正在使用指示性进行验证,但问题出在我的组件上,我认为因为错误的状态正在实时变化,这就是问题所在。但我不确定如何连接useEffect
到我的onChange
处理程序。
这是我的组件:
所以总结一下,我如何useEffect
倾听错误状态的变化,userNameError
因为passwordError
我认为这是问题所在。
更新:
这是我认为 Iarz 的意思的演示。
reactjs - React-Bootstrap 悬停时打开下拉菜单
我是 ReactJS 和 react-bootstrap 的新手。我的目标是在用户悬停(鼠标悬停)时打开一个下拉菜单。我已经搜索过了,但是没有用。我的解决方案是使用反应挂钩来存储和更新数组中“hoverItem”的当前状态是真还是假(Beacase我有2个下拉菜单。不仅仅是1个)。
但它不起作用并出现错误“错误:重新渲染过多。React 限制渲染次数以防止无限循环”
更新状态为:
这个问题的重点是我不知道如何更新(修改)数组中的元素状态。请告诉我怎么做。谢谢你,对我的英语不便感到抱歉。