问题标签 [use-effect]

我正在尝试使用 react-hooks 为列表实现键盘导航。

重要- 此列表可以根据搜索缩小/增长。

我的问题是围绕Enter应该运行一些回调的键。activeCursor不会改变，我理解因为它不在数组中，但是我怎样才能在不重新运行的情况下useEffect获得当前状态？handleKeyPressuseEffect

此外，理想情况下，我希望useEffect只在 mount ( []) 上运行，但由于filteredMessages更改我必须重新调用它，这也是我觉得奇怪的事情，因为它eventListeners所以我什至不确定他们每次会发生什么......

我将基于类的组件转换为功能组件，并认为我的componentDidUpdate方法转换正确，但我的 linter 抱怨，所以我可以澄清一下我出错的地方。

这是我componentDidUpdate在基于类的组件上的功能：

这就是我试图将其更改为useEffect()在功能组件上使用的内容：

Eslint 告诉我依赖数组需要包含startAtand saveInitialSession，这对我来说没有任何意义。我只希望它hasUnlockBeenClicked在更改后运行。

在 React 文档中，关于useEffect()钩子，我们得到：

“使用 useEffect 安排的效果不会阻止浏览器更新屏幕。”

小费

与 componentDidMount 或 componentDidUpdate 不同，使用 useEffect 安排的效果不会阻止浏览器更新屏幕。

这到底是什么意思？

示例：假设我有以下内容：

• 受控输入
• 第一次渲染后的 useEffect 会执行一些昂贵的同步计算。

这是否意味着即使在运行繁重的同步计算时，我也可以完全使用我的input（由 React 使用 JS 控制，它是单线程的）？如果是这样，这怎么可能？

我有一个看起来像这样的组件：

详尽的 lint 规则并不令人满意：

React Hook useEffect 缺少依赖项：id和onChange. 要么包含它们，要么删除依赖数组。(react-hooks/exhaustive-deps)eslint

我知道id并且onChange不会改变，所以将它们添加到依赖数组似乎是不必要的。但这条规则不是警告，而是明确的指示去做某事。

是 ESLint 规则：

1）在这种情况下过于谨慎和有点愚蠢，那么可以忽略吗？

2) 强调最佳实践——例如，如果父组件的更改意味着 id在将来的某个时间点会发生变化，则尽量减少将来可能发生的意外错误？

3) 显示当前代码的实际/可能问题？

在 React 16.8 中，我使用 useReducer、useContext 挂钩实现了我的项目，并创建了一个与 Redux 类似的全局状态管理系统。

在一个视图中，当我尝试在 useEffect 中获取数据时，它会导致最大更新深度错误。

我已经尝试了Facebook React - Hooks-FAQ中的所有示例，但无法解决问题。

我的 package.json 是这样的：

这是我的代码示例：

这是 View.js

如果您真的愿意解决这个问题，请查看存储周期的其他文件。

这是 useView.js 的钩子：

这是要调度的 viewReducer.js：

这是 StoreProvider 提供应用程序中的每个组件并传递状态：

这是为不同视图克隆许多 reducer 的 reducers index.js：

很抱歉有很多文件，但没有其他方法可以解释这种情况。曾经使用过 Redux 的人可以理解这种方法。state => action => dispatch system 没有问题，直到我尝试使用页面的初始渲染获取数据（在这个例子中，我称之为 View）。

经典的let didCancel = false方法不起作用。如果我将状态与新获取的数据进行比较，问题就解决了。但是当我添加加载时，它会触发 useReducer 并重新渲染页面，这会导致无限循环。

UseRef 和 clearInterval 不会阻止它，并且会发生此错误：

当我在 useEffect 中有多个 setState 时如何避免重新渲染？

我想进行 2 个 API 调用并在 useEffect 中设置 3 个不同的状态（当组件确实挂载时）并且只有一个重新渲染

像这样的东西

在所有的集合之后我只想要一个渲染。我知道在每个 setStates 之后重新渲染是正确的，但是我怎样才能让它只做一个呢？把所有状态都放在一个对象中好吗？像阶级状态？

我一直在学习 React，我读到从返回的函数useEffect是为了进行清理，React 在组件卸载时执行清理。

所以我对它进行了一些试验，但在下面的示例中发现，每次组件重新渲染时都会调用该函数，而不是仅在它从 DOM 中卸载时调用，即每次组件重新渲染时都会调用该函数console.log("unmount");。

这是为什么？

现场示例：https ://codesandbox.io/s/vigilant-leavitt-z1jd2

我需要与内容集成，并且很难获取嵌套的 JSON 数据

当我这样做时，我得到了想要的结果：

但是，我在控制台中收到警告：

警告：效果函数不能返回除用于清理的函数之外的任何内容。

看起来你写了 useEffect(async () => ...) 或返回了一个 Promise。相反，在你的效果中编写异步函数并立即调用它：

因此，当我尝试它时，我收到一条错误消息，指出未定义响应：

谢谢你的帮助

既然不用useEffect()hook就可以直接从axios中取数据，那为什么首选先用useEffect()再用axios呢？

另外，在什么情况下useEffect()不需要？

这是一个例子：

我有一个App带有useEffect钩子的功能组件，我试图让<Redirect>子组件在状态更改时重新渲染，特别是对setUserInSystem应该更新的调用，它userInSystem在渲染方法中显式引用。但是，组件在更改时不会重新渲染userInSystem，我不知道为什么。（注意：两个异步函数都按预期工作并检索正确的数据。getUserInfo）getUserByWorkEmail