anu 最新版本 componentdidcatch 有问题

[Foveluy]

使用的是anu最新版本，从github直接下的.

import React from 'react';
import ReactDOM from 'react-dom';
// import PropTypes from 'props-type';

const Hello = ({ name }) => <h1>Hello {name}!</h1>;

class ShowMyError extends React.Component {
  constructor(props) {
    super(props);
    this.state = { error: false };
  }

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

  render() {
    if (this.state.error) {
      return (
        <div>
          <h1>
            Error AGAIN: {this.state.error.toString()}
          </h1>
          {this.state.info &&
            this.state.info.componentStack.split("\n").map(i => {
              return (
                <div key={i}>
                  {i}
                </div>
              );
            })}
        </div>
      );
    }
    return this.props.children;
  }
}

class Broken extends React.Component {
  constructor(props) {
    super(props);
    this.state = { throw: false, count: 0 };
  }

  render() {
    if (this.state.throw) {
      throw new Error("YOLO");
    }

    return (
      <div>
        <button
          onClick={e => {
            this.setState({ throw: true });
          }}
        >
          button will render error.
        </button>

        <button onClick={e => {
          this.setState(({ count }) => ({
            count: count + 1
          }));
        }}>button will not throw</button>

        <div>
          {"All good here. Count: "}{this.state.count}
        </div>
      </div>
    );
  }
}

class App extends React.Component {
  render() {
    const styles = {
      fontFamily: "sans-serif",
      textAlign: "center"
    };
    return (
      <div style={styles}>
        <Hello name="ShowMyError" />
        <h2>
          Start clicking to see some {"\u2728"}magic{"\u2728"}
        </h2>
        <ShowMyError>
          <Broken />
        </ShowMyError>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

以上的例子在Anu中的截图是：

下面是在react 16.2.0中的截图

[Foveluy]

补充，在componentDidcatch中能获得正确的错误信息。我打印出来了

[Foveluy]

原来是react在this.state.info里实现了一个componentStack，用\n把错误栈隔开的一个字符串。不是啥大问题..

[RubyLouvre]

已经修复