如何获得 Gatsby 的非缩小反应错误

Question

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

failed We've encountered an error: Minified React error #31; visit https://reactjs.org/docs/error-decoder.html?invariant=31&args[]=object%20with%20keys%20%7Bid%2C%20frontmatter%2C%20parent%7D for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

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

留言于reactjs.org

Objects are not valid as a React child (found: object with keys {id, frontmatter, parent}). If you meant to render a collection of children, use an array instead.

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

有人可以指点一下吗？

Answer 1

这不是 Gatsby 错误，而是 React。

如果您不知道问题出在哪里，想象一下我们。通常，此类错误与您尝试渲染对象而不是属性 os this 对象的方式相关，通常在循环中。例如：

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}`
})

上面的代码片段将抛出与您描述的相同的异常，因为 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}`
})

此代码段有效，因为 user.name 是有效的 return 类型（字符串），而不是对象。

如何获得 Gatsby 的非缩小反应错误

How to get non-minified react errors for Gatsby

reactjs

gatsby