如何找出错误来自哪里？

Question

我收到此错误，因为我不小心在我的render方法中调用了某个方法。 由于我的应用程序代码很大，因此我无法确定这是从哪里来的。

当我单击控制台中的index.js链接时，它将带我到以下代码。

这是我在进行一些调试（调用堆栈）后发现的，但这并不是确切的完整组件代码，因为组件中的代码行太多，我只是在此处发布了一部分。 这段代码有什么问题吗：

class Sample extends React.Component {
  constructor(props) {
    super(props);

    this.handleSelect = this.handleSelect.bind(this);

    this.state = {
      activeKey: '',
    };
  }
  handleSelect(activeKey) {
    this.setState({ activeKey });
  }

  render() {
    if (this.state.activeKey === '') {
      activeKey = this.getDefaultKey();
      this.handleSelect(activeKey);
    }
    return (
      <PanelGroup
        accordion
        activeKey={this.state.activeKey}
        onSelect={this.handleSelect}
      >
        {optionList}
      </PanelGroup>
    );
  }
}

Answer 1

您正在渲染函数中调用this.handleSelect，该函数调用setState。 如错误所示，您无法执行此操作。 在没有看到整个组件并且不知道应该做什么的情况下不能肯定地说，但是我最好的猜测是至少不会出错：

class SampleOptions extends React.Component {
  constructor(props, context) {
     super(props, context);

    this.handleSelect = this.handleSelect.bind(this);

    this.state = {
      activeKey: this.getDefaultKey(),
    };
  }
  handleSelect(activeKey) {
    this.setState({ activeKey });
  }

  render() {
    return (
      <PanelGroup
        accordion
        activeKey={this.state.activeKey}
        onSelect={this.handleSelect}
      >
        {optionList}
      </PanelGroup>
    );
  }
}

Answer 2

我首先要先使用react dev tools chrome扩展，如果您使用的是redux，也可以安装redux dev工具，这两个工具都可以发现state或props中的错误。

但是，最有可能的是，您的组件之一存在错误，您应该使用摘要或指向代码库的链接来更新您的问题。