Максимальная глубина обновления превышена при перекомпоновке

Question

Я видел несколько тем, в которых говорилось об этой распространенной ошибке, но я не нашел ничего, связанного с использованием перекомпоновки.

Контекст

У меня есть 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 (allFormValuesSelected) setBookingValidation(); максимальная глубина обновления превышена из-за функции setBookingValidation()

Вопрос Как мне избежать такого поведения? Есть способ сохранить эту функцию?

Answer 1

Это происходит потому, что setBookingValidation() меняет значение свойства и вызывает componentWillReceiveProps. И вы получили бесконечный цикл вызовов.

Если вы хотите выполнить проверку формы, вы должны переместить эту функциональность в отдельный метод withHandlers () и вызвать событие onChange.