React 事件监听器是否会在功能组件中显示意外的状态变化？

事件监听器的 React Hooks 行为错误

在此查询中，我们在使用 React Hooks 时遇到问题。使用事件侦听器处理按钮单击时，控制台日志显示不正确的状态。

问题描述

在提供的 CodeSandbox 中，遵循以下步骤：

1. 单击“添加卡”按钮两次以创建两张卡。
2. 对于第一张卡，单击“Button1”并在控制台中验证它是否正确记录了两张卡。
3. 对于第一张卡，单击由事件侦听器控制的“Button2”。请注意，控制台现在仅显示一张卡片。

此行为是意外的，因为第一张卡片的“Button2”也应该显示两张卡片的存在。

;问题原因

此问题源于 CardsProvider 和 Card 组件中不同的事件处理程序处理。

• CardsProvider: 事件处理程序是每次组件渲染时都会重新创建，定义时引用陈旧状态。
• Card: 事件处理程序在组件安装时注册，并在作为 props 传递时接收新状态。然而，一个事件处理程序 (handleCardClick) 仅注册一次，并且永久引用陈旧状态。

解决方案

解决此问题需要仔细考虑使用 useState 钩子的功能组件中的事件处理方法。这里有几个选项：

1。可变状态：

使用 useRef 而不是 useState 来引入保存当前状态的可变对象。虽然这种方法允许直接状态突变，但它违背了 React 开发的推荐实践。

2.状态更新器函数：

每当注册事件侦听器时，都会传递一个状态更新器函数，该函数从封闭范围接收新鲜状态而不是陈旧状态。这可确保事件侦听器始终能够访问最新状态。

3.手动事件监听器重新注册：

每次状态改变时重新注册事件监听器。这可以确保回调始终收到最新的状态信息。

4.内置事件处理：

对于组件范围内的事件侦听器，通过直接在 JSX 中定义事件侦听器来利用 React 的内置事件处理。这消除了对 useEffect 的需要，并确保事件监听器始终接收当前状态。

以上是React 事件监听器是否会在功能组件中显示意外的状态变化？的详细内容。更多信息请关注PHP中文网其他相关文章！