Question

如何找出 ReactJS 中的错误来源？

2018-08-14

10098

javascript reactjs redux react-router react-router-redux

我收到此错误是因为我不小心在渲染方法中调用了某些方法。由于我的应用程序代码非常大，我无法找出它来自哪里。

当我单击控制台中的 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

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

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

Answer 2

您在 render 函数中调用了 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>
    );
  }
}