Блог

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

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

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

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

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

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

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

Вот мой запрос post:

 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 после отправки, а запрос post отвечает сбоем? Спасибо!