2

我遇到了一个奇怪的行为。看到这个小提琴。在使用 React 16 错误处理机制时，即错误边界，我注意到error参数是空的。经过进一步调查，我意识到只有在抛出 Error 对象时才会出现这样的情况：

throw new Error('The world is very strange')

但是，当以这种方式抛出错误时：

throw 'The world is very strange'

该错误将在componentDidCatch.

求各位大神赐教。我希望继续使用new Error，因为建议使用它，它应该可以访问文件和抛出的行号。

让我们看一下代码。

class Boundary extends React.Component {
    constructor() {
      super();
      this.state = {}
    }

    componentDidCatch(error, info) {
       this.setState({
        error,
        info,
      })
    }

  render() {
    if (this.state.error) {
       return (
       <div>
         {JSON.stringify(this.state)}
       </div>)
    }
    return this.props.children;
   }
}

class Component extends React.Component {
    render() {
  // Why and what should i do ?
    throw 'This will be available in the error parameter'
    throw new Error('This one will not')
  }
}

class TodoApp extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {
    return (
    <Boundary>
      <div>
        <Component />
      </div>
    </Boundary>
    )
  }
}
4

2 回答 2

3

该错误实际上是可用的。问题是它JSON.stringify不序列化Errorobjects，并且由于这是您用来显示错误的内容，因此看起来错误是空的。

这是您的 fiddle 的更新版本，它明确输出state.error.message，并且可以正常工作。

于 2018-07-17T15:14:42.073 回答
1

不鼓励抛出字符串，因为错误通常是一个对象，最好是Error.

投掷没有问题Error。处理方式有问题：

  if (this.state.error) {
     return (
     <div>
       {JSON.stringify(this.state)}
     </div>)
  }

由于error.message是不可枚举的，error因此被字符串化为{}. 这是预期的行为。JSON.stringify不应该依赖作为对象的全方位表示 - 这就是开发工具控制台的用途。

当前表示可以通过扩展来修复Error：

class HumanReadableError extends Error {
  toJSON() {
    return `Error: ${this.message}`;
  }
}

和

throw new HumanReadableError('This will not be available');
于 2018-07-17T15:14:57.723 回答