Question

我遇到了一个奇怪的行为。参见此fiddle。当使用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>
    )
  }
}

Answer 1

该错误实际上可用。问题是JSON.stringify doesn't serialize Error objects，并且由于这是您用来显示错误的原因，因此错误似乎为空。

Here's an updated version of your fiddle明确输出Snapshot，并且可以正常工作。

Answer 2

不建议抛出字符串，因为错误通常是对象，最好是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');

如果错误边界是错误类的实例，则错误边界不提供对错误的访问权限

2 个答案: