如何获得更多有用的错误消息？

Question

每当我尝试访问undefined时，

React + ES6 Babel会发出以下错误消息（例如，尝试person.age person === undefined。

当我错误输入import语句或在构造props对象时出错时，也会发生这种情况。例如，我可能犯下以下错误：

const { name, age } = this.props.person
// but `this.props.person` only has a `name` property.

这种缺乏错误信息是一种痛苦。有没有我错过设置的选项？每个人都如何应对这个问题？

Answer 1

这是一个高度要求的功能，可能会在下一个React版本中实现。现在您可以使用redbox-react。据我所知，react-transform-catch-errors已被弃用。

/* global __DEV__ */
import React from 'react'
import { render } from 'react-dom'
import App from './components/App'

const root = document.getElementById('root')

if (__DEV__) {
  const RedBox = require('redbox-react').default
  try {
    render(<App />, root)
  } catch (e) {
    render(<RedBox error={e} />, root)
  }
} else {
  render(<App />, root)
}

Answer 2

是的，这很烦人。一种有用的方法是使用try / catch包装每个React组件的render-method，这样你就可以看到实际的错误而不是React提供的乱码。将此添加到您的babel.js-config中，以便自动完成：https://github.com/gaearon/react-transform-catch-errors。