Question

我正在使用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且帖子请求失败了吗？谢谢！

Formik和React-Select-提交表单失败时，“选择”下拉列表无法保持适当的值

0 个答案: