最小化反应错误#310;通过React中的Selenium使用Chrome,可以使用非缩小的开发环境来获取完整的错误和其



我是自动化测试的新手。我正在使用Selenium/Java/Cocumber/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命令有什么方法可以避免或处理这个问题吗?

此错误消息。。。

"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的缩小生产版本,它可以避免发送完整的错误消息,以减少通过有线发送的字节数。


分析

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

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

Rendered more hooks than during the previous render.

解决方案

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

  • 只在顶层调用钩子:不要在循环、条件或嵌套函数中调用钩子。相反,请始终在React函数的顶层使用Hooks。通过遵循此规则,可以确保每次渲染组件时都以相同的顺序调用Hook。这使得React能够在多个useState和useEffect调用之间正确地保留Hooks的状态。

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

    • 从React函数组件调用钩子
    • 从自定义挂钩调用挂钩(我们将在下一页了解它们(

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


参考文献

你可以在中找到一些相关的讨论

  • 未捕获的不变冲突:渲染的钩子比上一次渲染时多
  • 渲染的钩子比上一次渲染时多。使用React Hooks发布表单数据时
  • 渲染的钩子比上一次渲染时多
  • 当钩子的初始值是来自数据库的查询结果时,出现"呈现的钩子比上次呈现时多"错误

tl;dr

如何修复React错误:呈现的钩子比预期的少

最新更新