javascript - How to find out where the error is coming from in ReactJS? - Stack Overflow

admin管理员组

文章数量:1318573

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 ing 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 ponent code, as there are too many lines of code in the ponent 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>
    );
  }
}

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 ing 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 ponent code, as there are too many lines of code in the ponent 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>
    );
  }
}

• javascript
• reactjs
• redux
• react-router
• react-router-redux

Share Improve this question Follow edited Aug 15, 2018 at 17:21 sravan ganji asked Aug 14, 2018 at 21:03 sravan ganjisravan ganji 5,12555 gold badges2727 silver badges4444 bronze badges 6

• I usually put a breakpoint there and then scroll through the stack trace in my browser until I find the source. – larz Commented Aug 14, 2018 at 21:06
• @larz where should i put the breakpoint it looks like line 2178 is react library code. – sravan ganji Commented Aug 14, 2018 at 21:08
• That's where I usually put it. In Chrome (not sure about other browsers) any breakpoint will give you access to the Call Stack and you can scroll through and interactively click into each file until you find the ponent causing your issue. – larz Commented Aug 14, 2018 at 21:11
• The error message in screen shot suggests that one of your ponent is setting state or props in render function. So try avoiding setState or set redux state from your render function or ponent update callbacks. you can also use ponentDidCatch callback to log your error. reactjs/docs/react-ponent.html#ponentdidcatch – Gurpreet Singh Commented Aug 14, 2018 at 21:23
• @GurpreetSingh added some code can you please check if there is anything wrong – sravan ganji Commented Aug 15, 2018 at 3:40

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 3

I would first use the react dev tools chrome extension first, you could also install the redux dev tools if you are using redux, both of these can find errors in state or props.

Most likely, though, there is an error in one of your ponents, and you should update your question with either snippets or a link to the codebase.

You're calling this.handleSelect in the render function, which calls setState. As the error says, you can't do this. Can't say for sure without seeing the whole ponent and knowing what it's supposed to do, but my best guess at something that would at least not error:

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>
    );
  }
}

本文标签： javascriptHow to find out where the error is coming from in ReactJSStack Overflow