缩小 React 错误#310;在 React 中使用 Chrome 通过 Selenium 使用非缩小的开发环境来获取完整错误和其他有用的警告

TON*_*ARA 5 java selenium cucumber reactjs react-hooks

我是自动化测试的新手。我正在使用 Selenium/Java/Cucumber/Eclipse 创建测试框架并编写/执行自动化测试脚本。

以前正确运行的脚本现在在特定网页上失败。

在测试执行期间,加载特定页面,然后变为空白。

查看 Chrome 控制台输出,我看到以下错误:

Error: Minified React error #310; visit https://reactjs.org/docs/error-decoder.html?invariant=310 for the full message or use the non-minified dev environment for full errors and additional helpful warnings
Run Code Online (Sandbox Code Playgroud)

在Firefox上执行测试时,同屏也会出现此问题。

如果我手动点击自动测试失败的屏幕,我不会看到此错误。

有人在运行 Selenium 自动化测试时见过这个问题吗?

测试正在实时网站上运行,因此我无法调整应用程序代码。我仅使用此网站来练习测试自动化脚本。

有什么方法可以使用 selenium 命令来避免或处理这个问题吗?

Deb*_*anB 9

这个错误信息...

\n\n
"Error: Minified React error #310; visit https://reactjs.org/docs/error-decoder.html?invariant=310 for the full message or use the non-minified dev environment for full errors and additional helpful warnings"\n
Run Code Online (Sandbox Code Playgroud)\n\n

...意味着您正在使用React的精简生产版本,它可以避免发送完整的错误消息,从而减少通过线路发送的字节数。

\n\n
\n\n

分析

\n\n

根据错误解码器中的文档,强烈建议在调试应用程序时在本地使用开发版本,因为它会跟踪其他调试信息并提供有关应用程序中潜在问题的有用警告,但如果您在使用生产版本时遇到异常,这页面将重新组合错误的原始文本。

\n\n

然而,您刚刚遇到的错误的全文是:

\n\n
Rendered more hooks than during the previous render.\n
Run Code Online (Sandbox Code Playgroud)\n\n
\n\n

解决方案

\n\n

Hook 是 JavaScript 函数。React 要求每次渲染时都以相同的顺序调用钩子。使用它们时需要遵循以下两个规则:

\n\n
    \n
  • 仅在顶层调用 Hook:不要在循环、条件或嵌套函数内调用 Hook。相反,请始终在 React 函数的顶层使用 Hooks。通过遵循此规则,您可以确保每次渲染组件时都以相同的顺序调用 Hook。这\xe2\x80\x99s 允许 React 在多个 useState 和 useEffect 调用之间正确保留 Hooks 的状态。

  • \n
  • 仅从 React 函数调用 Hooks:不要从常规 JavaScript 函数调用 Hooks。相反,您可以:

    \n\n
      \n
    • 从 React 函数组件调用 Hooks。
    • \n
    • 从自定义 Hook 调用 Hook(我们\xe2\x80\x99 将在下一页了解它们)。
    • \n
  • \n
\n\n

通过遵循此规则,您可以确保组件中的所有状态逻辑从其源代码中清晰可见。

\n\n
\n\n

参考

\n\n

您可以在以下位置找到一些相关讨论:

\n\n\n\n
\n\n

TL; 博士

\n\n

如何修复 React 错误:渲染的钩子数量少于预期

\n