React使用useState实现表单提交无法打印输入值，如何使用setInputData？

问题原因 #

你当前打印inputData始终为空，是因为你只声明了这个状态，从未调用setInputData对它进行更新，它一直停留在初始化的空对象状态。另外你的inputData初始化代码里多传了第二个空数组参数，useState仅接收第一个参数作为初始值，这个多余参数可以删除。
另外你代码里还有一个小bug：姓氏（LastName）的非空判断写反了，用到了名字的非空变量enteredFNameFilled，需要修正避免校验逻辑异常。

解决方案 #

你可以根据需求选择以下两种方式更新inputData：

方式1：表单提交时一次性更新（更推荐，符合你的现有逻辑） #

直接在提交校验通过后，把所有表单项的当前值一次性存入inputData即可，修改formSubmitHandler逻辑：

const formSubmitHandler = (event) => {
  event.preventDefault();

  if (!enteredFNameValid || !enteredLNameValid) {
    alert("First Name and Last Name accepts letters only.");
    return;
  }

  // 新增：把所有表单值存入inputData
  const formData = {
    enteredFName,
    enteredLName,
    enteredEmail,
    enteredEid,
    enteredBirthday
  }
  setInputData(formData);

  // 注意：setState是异步的，直接打印inputData拿不到最新值，直接打印formData即可
  console.log(formData);

  // 后续重置逻辑不变
  setEnteredFName("");
  setEnteredFNameTouch(false);
  setEnteredLName("");
  setEnteredLNameTouch(false);
  setEnteredEmail("");
  setEnteredEmailTouch(false);
  setEnteredEid("");
  setEnteredEidTouch(false);
  setEnteredBirthday("");
  setEnteredBirthdayTouch(false);
};

方式2：输入时实时同步 #

如果需要inputData实时保存最新的输入内容，可以在每个输入框的change回调里同步更新，比如名字输入的回调修改为：

const fNameChangeHandler = (event) => {
  setEnteredFName(event.target.value);
  // 新增：同步更新inputData里对应字段
  setInputData(prev => ({
    ...prev,
    enteredFName: event.target.value
  }))
};

其余姓氏、邮箱、EID、生日的changeHandler都按照同样逻辑添加更新代码即可，这种方式下提交的时候直接打印inputData就能拿到最新值。

修复LastName校验bug #

找到LastName的非空判断代码，修改为：

// 原代码错误用到了enteredFNameFilled，改成enteredLNameFilled
const enteredLNameNotFilled = !enteredLNameFilled && enteredLNameTouch;

内容的提问来源于stack exchange，提问作者kelly-ghost_busters