Formik и React-Select - когда отправка формы завершается неудачей, выпадающий список не поддерживает правильное значение - PullRequest
Новая
       32

Formik и React-Select - когда отправка формы завершается неудачей, выпадающий список не поддерживает правильное значение

1 голос
/ 19 апреля 2019

Я использую React, Formik и react-select.У меня возникли проблемы с раскрывающимся списком выбора страны.

Перед отправкой формы я вижу, что форма имеет и значение, и метку: 

console.log(this.props.values.billing_information_attributes.address_attributes.country )

возвращает это значение {value: "United States", label: "United States"}

После отправкиформа и почтовый запрос отвечают с ошибкой (это желаемая ошибка для целей тестирования), все другие формы сохраняют свои значения, за исключением этого раскрывающегося списка.Теперь тот же console.log возвращает только "United States"

Чтобы раскрывающийся список работал, необходимо предоставить объект в формате, упомянутом до {value: "United States", label: "United States"}, или раскрывающийся список выглядит пустым.Очевидно, что я мог бы обойти и снова установить значение поля, используя setFieldValue, но я чувствую, что что-то упустил в отношении жизненного цикла Formik.Еще одна важная вещь, которую стоит упомянуть, это то, что перед отправкой запроса на публикацию я изменяю данные, которые отправляю на сервер, и отправляю только значение страны, а не весь объект значения и метки, например: 

newParams["billing_information_attributes"]["address_attributes"]["country"] =
params["billing_information_attributes"]["address_attributes"]["country"].value

Вот мой почтовый запрос: 

handleSubmit = (params, actions) => {
    Stripe.card.createToken(
      {
        number: params.card_number,
        cvc: params.security_id,
        exp_month: params.exp_month,
        exp_year: params.exp_year,
        address_zip: params.billing_information_attributes.address_attributes.postal_code
      },
      (status, response) => {
        params.stripe_card_token = response.id
        axios
          .request("/order/complete", {
            method: "patch",
            data: {
              order: modifiedParams(params, "checkoutForm"),
              authenticity_token: this.props.authenticity_token,
              agree_to_terms: params.agree_to_terms,
              save_new_card: params.save_new_card,
              saved_cards: params.saved_cards.value
            }
          })
          .then(({ data }) => {
            if (data.success) {
              actions.resetForm()
              actions.setStatus({ message: data.message })
              window.location.replace("/order/" + data.order_id)
            } else {
              actions.setErrors({ server: data.errors })
              actions.setStatus({ message: data.message})
              console.log(data)
            }
            actions.setSubmitting(false)
            document.querySelector(".flashMsg").scrollIntoView({ behavior: "smooth" })
          })
          .catch(error => {
            console.log(error)
            actions.setSubmitting(false)
            actions.setErrors({ server: ["Cannot submit form at the moment. Please try again."] })
            document.querySelector("body").scrollIntoView({ behavior: "smooth" })
          })
      }
    )
  }

Может кто-нибудь помочь выяснить, почему значение this.props.values.billing_information_attributes.address_attributes.country изменяется с {value: "United States", label: "United States"} на просто United States после отправки, и почтовый запрос отвечает неудачей?Спасибо!

...