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();
    },
  }),

这是一个简单的验证，当我具有所有selectedValues时，bookingValidation的状态将在true上更改，您将可以单击一个按钮。

问题

如果输入if (allFormValuesSelected) setBookingValidation();，则由于功能setBookingValidation()而超出了最大更新深度

问题我如何避免这种行为？有没有办法维持这个功能？

Answer 1

发生这种情况是因为$更改了属性值并调用了setBookingValidation()。这样您就可以无限循环通话。

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

重新组合超过了最大更新深度

1 个答案: