Форма ответа может быть подана дважды, несмотря на условный рендер - PullRequest
Новая
       13

Форма ответа может быть подана дважды, несмотря на условный рендер

2 голосов
/ 27 сентября 2019

У меня есть приложение React, связанное с Redux.Существует компонент, отображающий оболочку формы (пользовательская реализация Formik), в то время как сами входы формы отображаются дочерним компонентом.

(Не точный код, но все понятно.) 

...
render() {
  const {
    config,
    updateContactDetails,
    errorMessages,
    contactDetails,
    previousFormValues,
    isUpdating,
  } = this.props;
  const { apiBaseUrl, fetchTimeout, globalId } = config;
  const initialValues = previousFormValues || getInitialContactDetailsValues(contactDetails);

  if (isUpdating) return <Spinner />;
  return (
      <Form
        initialValues={initialValues}
        validate={(values) => validate(values, errorMessages)}
        onSubmit={(values) => {
          updateContactDetails(apiBaseUrl, globalId, values, fetchTimeout); // dispatch action
        }}
      >
        <ContactDetailsForm content={content} />
      </Form>
  );
}
...

Когда вы нажимаете кнопку отправки в ContactDetailsForm, значение isUpdating в хранилище Redux устанавливается на true.Как вы можете видеть выше, это приводит к замене формы на компонент счетчика.Однако можно как-то отправить форму дважды, дважды нажав кнопку.Как это может быть?Может ли произойти повторный рендеринг, прежде чем тот, который заменит форму с вращателем?Я знаю, что могу решить эту проблему, передав isUpdating в ContactDetailsForm и используя его для отключения кнопки, но я все еще хочу осветить причину.

EDIT

Редуктор выглядит как-товот так, на случай, если это поможет: 

case UPDATE_CONTACT_DETAILS_START: {
  return {
    ...state,
    errorUpdatingContactMethods: {},
    hasUpdatedContactDetails: false,
    isUpdating: true,
    contactDetailsValues: action.values,
  };
}

1 Ответ

0 голосов
/ 27 сентября 2019

Вместо этого вы должны установить свойство disabled для кнопки на основе isUpdating проп.Возможно, это просто состояние гонки.

...