每当切换输入字段时，状态默认为未定义

Question

我正在尝试设置一个支付网关，但我首先想将所有账单明细存储在状态变量中，然后传递给网关，但是在输入字段中，每当我输入电子邮件地址时，只要我还在，它就会输出它在输入字段中，但是当我选择 first_name 字段时，它的状态似乎没有保存并且默认返回未定义，我觉得我在这里遗漏了什么？

当前状态：

let [billingInfo, setBillingInfo] = useState({

    email: "",

    first_name: "",

    last_name: "",

    company_name: "",

    address: "",

    extra_address: "",

    city: "",

    country: "",

    state: "",

    zip_code: "",

  });

我如何输出到控制台：

const testM = (e) => {

    e.preventDefault();

    console.log(billingInfo.email);

    console.log(billingInfo.first_name);

    console.log(billingInfo.last_name);

  }

手柄输入法：

let handleInputChange = (e) => {

    setBillingInfo({ [e.target.name]: e.target.value });

  };

输入字段示例：

<form className="mt-4 ">

            <h4 className="mt-4">Contact Information</h4>

            <div className=" mb-3" style={{ height: "3rem" }}>

              <input

                type="tel"

                name="email"

                value={state.email}

                className="rounded"

                style={{ width: "100%", height: "100%" }}

                placeholder=" Email Address.."

                onChange={handleInputChange}

              />

            </div>

            <h4 className="mt-4">Shipping Information</h4>

            <div className="row" style={{ height: "3.5rem" }}>

              <div className="mb-3 col-6">

                <input

                  type="tel"

                  name="first_name"

                  value={state.first_name}

                  className="rounded"

                  style={{ width: "100%", height: "100%" }}

                  placeholder=" First Name.."

                  onChange={handleInputChange}

                />

              </div>

Answer 1

会不会是当你通过 更新你的状态时setBillingInfo({ [e.target.name]: e.target.value })，你实际上是在billingInfo用另一个只包含一个键的对象替换你的初始对象？我会尝试更新它，setBillingInfo({ ...billingInfo, [e.target.name]: e.target.value })看看是否能解决您的问题。