超过最大更新深度。使用 TimePickerInput onChange 事件 React.js 时的无限循环

Posted 2023-02-19

【中文标题】超过最大更新深度。使用 TimePickerInput onChange 事件 React.js 时的无限循环

【英文标题】：Maximum update depth exceeded. Infinity loop when using TimePickerInput onChange event React.js

【发布时间】：2018-04-19 09:16:12

【问题描述】：

我有这样的 TimePickerInput 组件

  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;

当我在像这样的另一个组件中使用它时

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

并且有这样的 onChangeTimeField

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

我总是收到这样的错误

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.

我找不到解决此错误的方法。我认为它发生在 on("changeTime.timepicker") 和 requestUpdateTimeField(value, fieldName) done 之间有很多 onChange 事件调用时

【问题讨论】：

看起来您正在使用 jQuery timepicker 插件。如果是这样，您使用的是哪一个？ jQuery插件是否有可能在调用setTime时触发changeTime.timepicker事件？这将导致您的代码中出现无限循环，因为您最终会在触发changeTime.timepicker 时调用setTime。如果e.time.value !== this.props.value，您可以通过仅在TimePickerInput 中调用onChange 处理程序来避免这种情况。

我不能 100% 知道，但看起来通过调用 TimePickerInput 的 onChange 回调，值被调度，所以 UI 更新调用 onChange 回调再次调度价值和永远循环。尝试在调度之前检查该值是否已更改。

在 onChangeTimeField 的情况下，您传递 2 个参数，e --> 目标元素和字段名称：您必须使用 e.target.value 获取值。

【参考方案1】：

这可能是因为您无条件使用componentWillReceiveProps。请参阅此see this。您应该使用these 之一而不是componentWillReceiveProps，因为它现在被认为是旧的。