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

Question

我是自动化测试新手。我正在使用 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

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

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

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

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

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

Answer 1

此错误消息...

"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"

...暗示您正在使用 React 的缩小生产版本这可以避免发送完整的错误消息，从而减少通过线路发送的字节数。

<小时/>

分析

根据 Error Decoder 中的文档强烈建议在调试应用程序时在本地使用开发版本，因为它会跟踪额外的调试信息并提供有关应用程序中潜在问题的有用警告，但如果您在使用生产版本时遇到异常，此页面将重新组装以下内容的原始文本:错误。

但是，您刚刚遇到的错误的全文是:

Rendered more hooks than during the previous render.

<小时/>

解决方案

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

• Only Call Hooks at the Top Level :不要在循环、条件或嵌套函数内调用 Hook。相反，请始终在 React 函数的顶层使用 Hooks。通过遵循此规则，您可以确保每次渲染组件时都以相同的顺序调用 Hook。这就是允许 React 在多个 useState 和 useEffect 调用之间正确保留 Hooks 状态的原因。

• Only Call Hooks from React Functions :不要从常规 JavaScript 函数中调用 Hooks。相反，您可以:

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

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

<小时/>

引用文献

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

• Uncaught Invariant Violation: Rendered more hooks than during the previous render
• Rendered more hooks than during the previous render. when posting form data with React Hooks
• Rendered more hooks than during the previous render
• "Rendered more hooks than during the previous render" error when the initial value for the hook is a query result from a database

<小时/>

tl;博士

How to fix React Error: Rendered fewer hooks than expected