如何获得盖茨比的非缩小反应错误

Posted 2023-02-21

【中文标题】如何获得盖茨比的非缩小反应错误

【英文标题】：How to get non-minified react errors for Gatsby

【发布时间】：2022-01-23 23:02:00

【问题描述】：

尝试运行 gatsby build 并收到此错误消息。

失败我们遇到了一个错误：Minified React 错误 #31；访问https://reactjs.org/docs/error-decoder.html?invariant=31&args[]=object%20with%20keys%20%7Bid%2C%20frontmatter%2C%20parent%7D 获取完整信息 消息或使用未缩小的开发环境来获取完整错误和其他有用的警告。

要查看我尝试过的完整消息： "GATSBY_ENV=development && gatsby build --no-uglify" 但这并没有改变。

在 reactjs.org 留言

对象作为 React 子对象无效（发现：对象带有键 id, frontmatter, parent）。如果您打算渲染一组子项，请改用数组。

这个项目中的许多对象都有这些键，所以我无法找到问题所在。

谁能给点建议？

【参考方案1】：

这不是 Gatsby 错误，而是 React。

如果您不知道问题出在哪里，请想象一下。通常，这种错误与您尝试呈现对象而不是该对象的属性的方式有关，通常在循环中。例如：

const users= [
  name: 'User 1', surname: 'Surname 1',
  name: 'User 2', surname: 'Surname 2',
  name: 'User 3', surname: 'Surname 3',
]

users.map(user=>
   return `the user is $user`
)

上面的 sn-p 将抛出与您描述的相同的异常，因为 user 是 React 无法推断或渲染的对象。你应该这样做：

const users= [
  name: 'User 1', surname: 'Surname 1',
  name: 'User 2', surname: 'Surname 2',
  name: 'User 3', surname: 'Surname 3',
]

users.map(user=>
   return `the user name is $user.name`
)

这个 sn-p 是有效的，因为 user.name 是一个有效的返回类型（字符串），而不是一个对象。

【讨论】：

有什么方法可以追踪错误发生的位置吗？还有，为什么这适用于gatsby develop 而不是gatsby build？

它也不应该在gatsby develop 中工作（它可能不会破坏你的编译，但它应该在控制台中显示一些东西）。关于可追溯性，在缩小文件中很难。尝试检查gatsby develop中的警告

使用gatsby develop 并检查每个页面是否有控制台错误最终会有所帮助！