如何在ReactJS中找出错误的来源？
如何在ReactJS中找出错误的来源？
提问于 2018-08-15 05:03:46
我得到这个错误是因为我不小心在我的渲染方法中调用了一些方法。由于我的应用程序代码真的很大，我无法找出这是从哪里来的。
当我单击控制台中的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>
);
}
}回答 2
Stack Overflow用户
发布于 2018-08-15 05:13:49
我会首先使用react dev tools chrome扩展，如果你使用的是redux，你也可以安装redux开发工具，这两个工具都可以发现状态或属性中的错误。
不过，最有可能的情况是，您的某个组件中存在错误，您应该使用代码片段或代码库链接来更新您的问题。
Stack Overflow用户
发布于 2018-08-15 13:21:14
您将在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>
);
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51849734
复制相关文章
相似问题