Maximum update depth. Infinity loop when using the TimePickerInput onChange React.js event

I have a TimePickerInput component similar to this

  class TimePickerInput extends React.Component {
  static propTypes = {
    value: PropTypes.string,
    onChange: PropTypes.func.isRequired,
    disabled: PropTypes.bool
  };

  static defaultProps = {
    onChange: function() {}
  };
  componentDidMount() {
    this._$input
      .timepicker({ 
        autoclose: true,
        minuteStep: 5,
        showSeconds: false,
        showMeridian: false
      })
      .on("changeTime.timepicker", e => {
        this.props.onChange(e.time.value);
      });
    this._$input.timepicker("setTime", this.props.value);
  }
  componentWillReceiveProps(nextProps) {
    this._$input.timepicker("setTime", nextProps.value);
  }
  render() {
    const { disabled } = this.props;
    return (
      <Wrapper>
        <IconWrapper>
          <Icon className="fa fa-clock-o" />
        </IconWrapper>
        <Input
          innerRef={ref => (this._$input = $(ref))}
          type="text"
          size="16"
          className="form-control"
          readOnly
          disabled={disabled}
        />
      </Wrapper>
    );
  }
}
export default TimePickerInput;

When I use it in my other component like this

<TimePickerInput  value={notificationConfig.timeToSendAuditReminder} onChange={e => this.onChangeTimeField(e, 'timeToSendAuditReminder')}/> 

and have onChangeTimeField like this

onChangeTimeField = (value, fieldName) => {
    this.props.dispatch(notificationConfigActions.requestUpdateTimeField(value, fieldName))
  }  

I always get an error like this

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.

I can not find a solution how to fix this error. I think this happened when there are a lot of onChange events between them ("changeTime.timepicker") and when requestUpdateTimeField (value, fieldName) is done

+4
source share

Source: https://habr.com/ru/post/1688846/


All Articles