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

我得到这个错误是因为我不小心在我的渲染方法中调用了一些方法。由于我的应用程序代码非常大，我无法找出这是从哪里来的。

当我在控制台中单击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>
    );
  }
}

类示例扩展了React.Component{
建造师（道具）{
超级（道具）；
this.handleSelect=this.handleSelect.bind（this）；
此.state={
活动密钥：“”，
};
}
handleSelect（活动键）{
this.setState（{activeKey}）；
}
render（）{
if（this.state.activeKey==''）{
activeKey=this.getDefaultKey（）；
this.handleSelect（activeKey）；
}
返回(
{选项列表}
);
}
}

我会首先使用chrome扩展，如果您使用redux，还可以安装redux开发工具，这两种工具都可以在状态或道具中找到错误

---

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

您正在调用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>
    );
  }
}

class SampleOptions扩展了React.Component{
构造函数（道具、上下文）{
超级（道具、背景）；
this.handleSelect=this.handleSelect.bind（this）；
此.state={
activeKey:this.getDefaultKey（），
};
}
handleSelect（活动键）{
this.setState（{activeKey}）；
}
render（）{
返回(
{选项列表}
);
}
}

我通常在那里放一个断点，然后在浏览器中滚动堆栈跟踪，直到找到源。@larz我应该把断点放在哪里？看起来第2178行是react库代码。我通常放在那里。在Chrome（不确定其他浏览器）中，任何断点都将允许您访问

调用堆栈

，您可以滚动浏览并交互单击每个文件，直到找到导致问题的组件。屏幕截图中的错误消息表明您的一个组件正在渲染功能中设置状态或道具。因此，请尝试避免从渲染函数或组件更新回调中设置redux状态。您还可以使用componentDidCatch回调来记录错误@Gurpreetsigh添加了一些代码，你能检查一下是否有什么错误吗？这是一个庞大的代码库，无法复制粘贴代码，而且是一个私有的repo，因此无法共享repo链接，我有react和redux开发工具扩展，但不了解如何调试。如果你使用git，我会尝试回到代码中没有出现错误的地方。然后，搜索任何您修改代码或变量的地方。这可能是由于使用.splice（）而不是.slice（）等简单操作造成的。我使用的是git，但修复了现有应用程序中的错误。添加了一些代码。请检查是否有任何错误