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
source
share