问题标签 [use-effect]

我正在尝试为注册表单设置错误消息，但因为我使用的是材料 UI，所以我必须为我的项目使用功能组件。我正在关注 youtube 上的教程，但那个人正在使用类组件。我设法将大部分代码转换为功能组件，但我迷失在 componentDidUpdate 函数中。

我也尝试使用 useEffect 功能，但无济于事，当有人单击提交按钮时，如果他们没有输入任何字段，我无法显示警报/消息错误。我还收到一个错误，即 msg 未在 SignUp 组件的 Alert 组件中定义，尽管它已在 useState 函数中定义。

下面是 SignUp 组件的代码

这是原来的 componentDidUpdate 函数

我正在尝试在滚动屏幕期间使用 React 功能组件实现类交换站点导航。

我向 windows 添加了一个侦听器，并使用 getBoundingClientRect 方法来检查我的顶部何时到达更改其类的位置。

无论我的滚动位置如何，下面的代码总是返回等于零的 Top。

在这个例子中我哪里错了？

滚动时，上、右、下、左、高和宽的位置是相同的。

我希望滚动页面时顶部值会发生变化。

我的代码正在运行，请遵循最终版本

I have a modal dialog that I want to close if the user clicks outside of the modal. I have written the following useEffect code but I run into following issue:

The modal dialog contains a number of children (React Nodes) and those children might change (e.g. the user deletes an entry of a list). Those interactions trigger my onClick method but as the clicked list item has been removed from the modal, the modal closes even though the click was within the modal.

I thought adding [ children ] at the second parameter for useEffect would cleanup the old effect event listener quick enough that the method does not run again but this is not the case.

I handled the same issue in a class component with a ignoreNextClick-state but there must be a cleaner solution, right?

在单击按钮组件中，我强制禁用按钮 500 毫秒以防止多次提交，并且在 0.5 秒后禁用状态恢复为默认值。尽管有不同的方法，但我得到了两行代码，我似乎无法在单元测试中涵盖这些代码。

请参阅下面的简化组件源：

的默认值disabled设置为false。测试用例：

未被覆盖的行是：forceDisabledButton(false);和clearTimeout(timeId);。我jest.runAllTimers()最初尝试过，但它也没有设法涵盖这两个功能。测试通过并且在应用程序中我没有任何内存泄漏警告（并且视觉确认按钮被禁用 500 毫秒），所以我知道它工作正常并且这两个函数都被调用。我可以尝试在单元测试中解决这两个功能的哪些修改？

谢谢

我正在尝试创建一个<Drift>安装 Drift 聊天服务的组件：

漂移.js

这个想法是一旦window.drift定义效果就会运行。但是，效果只运行一次——当 window.drift 未定义时。

完整的日志是：

如何创建对 window.drift 的引用，该引用会导致效果在定义后执行？

通过链接将对象链接消息从另一个页面传递到另一个页面。

然后接收并使用它在另一个页面上设置状态。

收到错误消息：这是一个无操作，但它表明您的应用程序中存在内存泄漏。要修复，请取消该componentWillUnmount方法中的所有订阅和异步任务。可以看到在钩子中使用：return () =>在useEffect这里可能有用，但我不知道应该如何完成。有任何想法吗？

除了最后添加的内容之外，无法使用 useRef/createRef 来获取任何其他 div。当单击按钮时，我怎样才能做到这一点，div 的引用发生了变化。

我已经尝试过 useRef 和 createRef。因为我想创建一个新的 ref 实例，所以我更多地研究了 createRef 而不是 useRef。我也玩过useEffect。但我的解决方案并没有帮助我解决我最大的问题

我制作了一个包含 3 个组件的小项目，以帮助您理解我要解释的内容。

我还有一个包含模拟数据的数据库-> 在我的真实项目中这不是问题。它是一个包含对象的数组。[{'id':'1', 'name':'first'},...]

主要的：

按钮组件

列出数据组件

我已经控制台记录了 data.current，它只获取最后一个元素。我希望它会为我单击的按钮获取一个。

因此，在使用useEffect调用依赖于状态的函数的 a 时，我遇到了以下情况。

例子：

问题：

在这种情况下，我应该someFunction在内部声明useEffect()还是将其保存在外部（但在组件的主体内部）是否安全？

我可以将它添加到dependency数组中，但它会损害我的代码的可重复性，因为我想专注于trigger.

由于useEffect()将在新渲染后运行，是否可以安全地假设它将具有我在其中调用的函数的新副本？

是否有一个基本规则，什么时候应该在useEffect钩子中声明函数，或者什么时候必须将它添加到依赖数组中？

编辑：请注意，必须useEffect拥有这些函数的新副本，因为这些函数需要访问一些最新的state变量。

笔记：

此代码在 CodeSandbox 上触发以下eslint 警告。虽然它工作得很好。

React Hook React.useEffect 缺少依赖项：'someFunction'。包括它或删除依赖数组。(react-hooks/exhaustive-deps)eslint

真实案例：

这是一个简化的例子。在我的真实案例中，这是一个带有过滤器组件的产品搜索页面。所以当我点击一个过滤器来激活它时（比如说，price <= 50），我触发了一个useEffect()“监听”activePriceFilters状态变量的。然后，该效果调用一个函数（someFunction在示例中），该函数将计算filteredList并使用 new 设置新productList状态filteredList。

片段

在 Dan Abramov 在 SO 上的这个回答中，我发现了以下内容：

React 是否保持状态更新的顺序？

目前（React 16 和更早版本），默认情况下，仅对 React 事件处理程序内的更新进行批处理。有一个不稳定的 API 可以在您需要的极少数情况下强制在事件处理程序之外进行批处理。

他还在这个 Github issue 中提到：

https://github.com/facebook/react/issues/10231#issuecomment-316644950

在当前版本中，如果您在 React 事件处理程序中，它们将被一起批处理。React 批处理在 React 事件处理程序期间完成的所有 setState，并在退出其自己的浏览器事件处理程序之前应用它们。

但事实是，这个片段似乎证明了 a 内多个setState调用的更新useEffect() 是批处理的。

问题

setState()React 是否也总是为内部的多个调用批量更新useEffect？它还能在哪里做到这一点？

注意：根据他的回答，在下一个主要版本（可能是 v17）中，默认情况下 React 将在任何地方进行批处理。

SNIPPET：useEffect()在多个setState()调用中批量更新

我从数据库中获取一些数据，该数据库是一组对象（歌曲）。我想一次显示 5 首歌曲，因为有 800 多首歌曲，如果我尝试一次全部加载，程序会变慢很多。

如果我直接加载歌曲，我的反应部分工作正常，但我正在尝试创建另一个状态，一次只存储 5 个对象，并显示这 5 个，而我有另一个称为“歌曲”的状态，它将设置它的状态一开始，存储800多首歌曲。当我尝试将此 5 存储在另一种状态时，程序崩溃。

我感谢任何帮助理解我的错误。

我尝试在修改 showSongs 的 useEffect 中设置一个 console.log，但 esLint（我认为它是 esLint）一直在修改函数末尾的数组，在其中添加一些我不想要的代码。

我不能做showSongs.map，但我可以做songs.map（但是歌曲会有800多首歌曲，所以我想显示showSongs）。

我在浏览器中遇到的错误是：

TypeError：无法读取未定义的属性“song_spotify_id”

我在控制台中同时遇到的错误是：

警告：无法对未安装的组件执行 React 状态更新。这是一个空操作，但它表明您的应用程序中存在内存泄漏。要解决此问题，请在 useEffect 清理函数中取消所有订阅和异步任务。

编辑：

编辑：

我已经检查过，但我不知道我在寻找什么。如果我删除以下功能，它可以工作：