如何找出ReactJS中的错误来自哪里？

Question

I am getting this error because I am accidentally calling some method in my render method. As my application code is really big I'm unable to find out where is this coming from.

When I click on the index.js link in the console it is taking me to the following code.

This is what I found after doing some debugging(call stack), But it's not the exact full component code, as there are too many lines of code in the component I'm just posting part of it here. Is there anything wrong with this code:

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

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

不过，最有可能的是，您的某个组件存在错误，您应该使用代码片段或代码库链接来更新您的问题。