重构超出了最大更新深度

Question

我看到几个话题都在谈论这个常见的错误，但我没有发现任何与使用 recompose 相关的内容。

上下文

我有这个withStateHandler

withStateHandlers(
    {
      bookingValidation: false,
    },
    {
      setBookingValidation: ({ bookingValidation }) => () => ({
        bookingValidation: !bookingValidation,
      }),
    },
  ),

我有这个lifeCycle

lifecycle({
    componentDidMount() {
      const { getFamily } = this.props;
      getFamily();
    },
    componentWillReceiveProps(prevProps) {
      const { formValues } = prevProps;
      const { setBookingValidation } = this.props;
      const {
        locationId,
        specialityId,
        serviceId,
        cancellationDetails,
        personId,
        date,
      } = formValues;

      const allFormValuesSelected = !!(
        locationId &&
        specialityId &&
        serviceId &&
        cancellationDetails &&
        personId &&
        date
      );

      if (allFormValuesSelected) setBookingValidation();
    },
  }),

这是一个简单的验证，当我选择了所有的值时，bookingValidation 的状态将在true 上发生变化，您将能够单击一个按钮。

问题

当你输入这个 if if (allFormValuesSelected) setBookingValidation(); 时，由于函数 setBookingValidation() 而超出了最大更新深度

问题 我怎样才能避免这种行为？ 有没有办法保持这个功能？

Answer 1

这是因为setBookingValidation() 更改了属性值并调用了componentWillReceiveProps。你得到了一个无限循环的调用。

如果您想执行表单验证，您应该将该功能移至单独的withHandlers() 方法并调用onChange 事件。