时间戳

首页 > 解决方案 > 重构超出了最大更新深度

javascript - 重构超出了最大更新深度

问题描述

我看到几个话题都在谈论这个常见错误，但我没有发现任何与使用 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()

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

标签： javascriptreactjsrecompose

解决方案

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

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

推荐阅读