问题标签 [use-effect]

当组件安装时，我正在使用useEffect挂钩来触发一些操作。

这是代码：

此代码工作正常，但我收到警告：

第 54 行：React Hook useEffect 缺少依赖项：'bar1'、'bar2'、'by'、'byOptions' 和 'graphData.displayedItems'。要么包含它们，要么删除依赖数组 react-hooks/exhaustive-deps

我不想将它们添加到依赖数组中，因为这样每次更新这些道具之一时它都会运行。我只想在组件安装时运行一次。

有没有办法摆脱警告，而不将它们添加到依赖数组中？

我知道这个警告可以被 ESLint 配置覆盖。但我不想要那个；我想要正确的解决方案。如果 React 已经添加了这个警告，必须是一个解决方案。

我正在学习使用钩子。这是有效的吗？我应该在这种情况下使用 componentDidUpdate 吗？

在此示例中，GET 请求取消正常：

但是当我需要通过 POST 请求保存表单时，我的代码如下所示：

请求不取消，我_zz.qq总是'QQ'代替'ZZ'。没有钩子它工作得很好，但我喜欢钩子并且想为新组件使用钩子。

我想在componentWillUnmount.

TL'DR：有没有办法在使用 useEffect 进行 API 调用时悲观地操作状态更改？

假设您编写了一个显示分页/排序数据网格的组件，并且您为该组件编写了一个 useEffect 类似于这个假示例：

因此，如果我没记错的话，这将在更新分页或排序状态/道具（whatev）时获取。这意味着它在加载数据之前乐观地呈现新的排序和分页状态。基本上，该应用程序告诉用户“我在请求的页面上，但我仍在加载它”。换句话说，应用程序状态的一部分（分页和排序）说“我完成了”，状态的另一部分（加载）说“我正在处理它”。

相比之下，如果我悲观地更新状态，我只会在获取之前将加载状态设置为 true，然后在收到响应时（并且只有在那时）设置分页、排序（& 数据和加载）。所以应用程序告诉用户“我听到了你的声音，我现在正在处理它”，然后当收到成功的响应时，应用程序会说“这是请求的数据和更新的上下文（更新的页面/排序状态）”。

另一个问题是请求是否失败。在 optimisitic/useEffect 方法中，我现在需要恢复在尝试加载这些状态更改的数据之前更新的分页和排序状态。这种复杂性随着依赖项的数量而增加。另外，这里是踢球者（再次，如果我没记错的话）恢复这些状态将导致另一个获取（可能再次失败）。在悲观的方法中，您只需在发生错误并且没有其他状态更改时设置 loading = false，因为只有在成功接收数据时才会更新分页和排序。数据以悲观的方式（不乐观）保持同步，这就是为什么当博客和视频在使用 useEffect 时说“考虑同步”时，我认为这很讽刺。

还有一件事，比如说从 useEffect 中调用的 API（在其他示例中）实际上正在更改服务器端的某些内容。在那种情况下，使用 useEffect 并应用它的乐观方法只是在欺骗用户。该应用程序说“好的，我更新了”。也许不吧。如果没有（如果有错误），希望有状态更新来恢复对用户撒谎的状态更改，并在恢复该状态时以某种方式避免额外的 API 调用。并希望用户看到状态变回来并希望有一条消息......即使那样，那是一个好的用户体验吗？

我并不是说乐观的渲染总是不好的。我说的是“我大部分时间都喜欢悲观。在使用 useEffect 时我该怎么做？” :)

似乎 useEffect 正在用于和推广应用程序的大多数副作用（很多）。我发现它经常没有用。我是一个悲观主义者，并希望启用另一种选择。

我有应用程序，我从byReact Native获取数据。我创建了从. 我需要每 5 秒重新渲染一次。为此，我将我的自定义钩子包装到 setInterval 并且在我的应用程序变得非常缓慢之后，当我导航到另一个屏幕时，我收到了这个错误：APIfetchAPI

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

你能告诉我如何解决这个错误，哪一个是最好的方法setInterval，因为我认为我的方法不好。

我的自定义钩子：

我的组件：

我对useEffect网络和移动设备之间的不同行为感到惊讶。渲染组件后，我希望useEffect被调用。它确实在网络上。请参阅此代码片段： https ://codesandbox.io/s/react-hooks-usestate-and-useeffect-m20dv?fontsize=14

我也在这里发布代码，让您一眼就能看到。

所以，重要的代码是这个块：

正如我所说，在 web 中运行此代码片段我得到了预期的结果：useEffect在我单击按钮后调用，因为这会触发重新渲染。但是React Native中的相同代码不会。或者，实际上，它会在或多或少 30 秒后（当我的手机变暗以节省能源时）。

除了视图标签，代码是一样的，见：

我读过的关于钩子的所有内容都向我保证，这段代码应该可以正常工作。另一方面，我发现的所有关于 React Native 的都是使用生命周期方法的示例。也许钩子还没有被用于反应原生？我找不到这种行为不一致的解释。有什么线索吗？

更新：我发现它也适用于 AVD 和小吃片段：https ://snack.expo.io/SkuxEfPNr 。它在真手机上是行不通的。

我正在使用 React hooks 实现一个无限滚动的解决方案。以下代码显示了我正在尝试完成的工作，并且可以在此处的代码和框上看到一个工作示例。

我收到exhaustive-deps警告是useEffect因为我没有将其列为data依赖项（这显然会导致无限循环）。有没有办法在不抑制此警告的情况下实现这种无限滚动解决方案？

在什么情况下可以这样的结构

运行多次？

我认为它不应该按照定义，但在这个视频中它确实： https ://www.youtube.com/watch?v=7RMwZ0_tANg

我试图useEffect在我的 React 应用程序中使用，但也更模块化地重构事物。下面显示的是实际工作代码的核心。它驻留在 Context Provider 文件中并执行以下操作： 1. 调用 AWS Amplify 以获取最新的 Auth Access Token。Authorization2.当对 API 端点进行 Axios GET 调用时，以标头的形式使用此令牌。

这很好用，但我认为将步骤#1 移到useEffect上面自己的构造中会更有意义。此外，在这样做时，我还可以将标头对象存储为它自己的 Context 属性，然后 GET 调用可以引用该属性。

不幸的是，我现在可以从控制台日志语句中看到，当 GET 调用开始时，尚未检索到 Auth Access Token。所以重构尝试失败了。

有没有办法将我的代码重构为两个useEffect实例，以便第一个在第二个开始之前完成？

我正在开发一个名为“GitHub Finder”的应用程序。

我正在使用异步函数获取 App 组件中的日期，并将这些函数作为道具传递给用户组件，我在 useEffect 中调用这些函数。

问题就在这里，当我第二次进入用户页面时，它显示了我从 App 组件传入 props 的先前数据，然后显示加载器并显示新数据。

这是应用程序组件代码，我从 API 获取日期并通过道具传递给用户组件。

用户组件代码。

我已经录制了一个视频，所以你们可以很容易地理解我想说什么。 视频链接

检查实时应用

我怎么解决这个问题？

预先感谢！

我有一个数组，它作为道具提供给我的名为Child. 现在，每次将新项目添加到数组时，都应该针对 API 进行提取。

这个数组保存在一个Parent使用useState钩子命名的组件中。每当我想添加一个新项目时，我都必须重新创建数组，因为我不允许直接对其进行变异。

我试图在以下代码片段中简化我的用例：

现在，我的问题是：我怎样才能从我的 API 中只为新元素而不是整个数组获取新数据？

我希望我足够好地描述了我的问题。如果有任何不清楚或遗漏的地方，请告诉我。