React: 当记忆的组件同时使用挂钩和悬念时发出警告

创建于 2019-02-07 · 4评论 · 资料来源: facebook/react

您是否要请求功能或报告错误？

漏洞

目前的行为是什么？

满足以下所有条件的组件在控制台中显示警告：

它使用React.memo记忆
它使用钩子
它使用了悬念（有一个承诺被抛出）。

该警告的文本： Warning: ComponentName: Rendered more hooks than during the previous render. This is not currently supported and may lead to unexpected behavior.

如果当前行为是错误，请提供重现步骤，并尽可能提供问题的最小演示。 将链接粘贴到以下示例中的JSFiddle（https://jsfiddle.net/Luktwrdm/）或CodeSandbox（https://codesandbox.io/s/new）的示例中：

https://codesandbox.io/s/71lr16j491

预期的行为是什么？

由于符合钩子规则，因此不应显示警告。此外，无论是否使用React.memo ，行为都应保持一致。

哪个版本的React，以及哪个浏览器/操作系统受此问题影响？

反应16.8.1

Hooks Bug

资料来源

trojanowski

👍3

最有用的评论

在16.8.2中已修复。
https://codesandbox.io/s/vmmkmvo6pl

gaearon 于 2019-02-14

👍2

所有4条评论

我的第一读是这是一个错误。

gaearon 于 2019-02-08

我在版本16.8.1注意到了同样的问题。但是，在我的情况下，在抛出Promise的地方与Suspense组成部分之间没有记忆成分。

在抛出Promise并显示警告之前，该组件在顶部声明了两个钩子。在出现钩子和相同事件之前，我移动了调用，将Promise扔到了顶部。如果组件内没有抛出Promise警告消失。

我的组件的模拟如下：

function Component(props) {
  const [state, setState] = useState()
  useEffect(...)

  // Promise is thrown somewhere after these two
  // hooks on top, but before the return statement.
  return (
    ...
  )
}

muqg 于 2019-02-09

可以确认这一点。

ex3ndr 于 2019-02-12

在16.8.2中已修复。
https://codesandbox.io/s/vmmkmvo6pl

gaearon 于 2019-02-14

👍2

此页面是否有帮助？

0 / 5 - 0 等级

React: 当记忆的组件同时使用挂钩和悬念时发出警告

最有用的评论

所有4条评论

相关问题