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

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 })看看是否能解决您的问题。