错误：超过最大更新深度。 setState 抛出错误

Question

export class ABC extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      abc: null
    };
  }

  renderOptions() {
      this.setState({
        abc: abcArray.length !== 0
      });
    return;
  }

  renderRadio() {
    return (
          <Field
            id="abc"
            name="abc"
            values={this.renderOptions()}
          />
    );
  }

  render() {
    return (
      <div>
               {this.renderRadio()}

      </div>
    );
  }
}


export default connect(mapStateToProps)(ABC);

I am trying to setState in renderOptions() which gives me the below error.

Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

can't get my head around what im doing wrong here.

any help is appreciated.

Answer 1

Your render method is calling setState , which will trigger render to be called again.

You should not call setState inside of renderOptions .

Answer 2

in renderRadio() -> values={this.renderOptions()} you are calling the renderOptions function. that function calls the this.setState({abc: abcArray.length;== 0}); . then react will try to rerender the component. this will create a loop. to avoid it, you should change values prop to this values={this.renderOptions}

I've refactor your code.

export class ABC extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      abc: null
    };
  }

  renderOptions() {
      this.setState({
        abc: abcArray.length !== 0
      });
    return;
  }

  renderRadio() {
    return (
          <Field
            id="abc"
            name="abc"
            values={this.renderOptions}
          />
    );
  }

  render() {
    return (
      <div>
               {this.renderRadio()}

      </div>
    );
  }
}


export default connect(mapStateToProps)(ABC);