React useState对象更新异常：lName输出undefined求助

问题出在属性名的大小写拼写错误：

在处理lName输入的分支中，你错误地将属性名写成了小写的lname，但初始状态里定义的是大写N的lName。JavaScript对象的属性名严格区分大小写，这就导致更新状态时，你并没有给lName赋值，而是新增了一个无关的lname属性，所以读取fullName.lName时自然返回undefined。

修正后的代码 #

把lname改成lName即可：

function handleChange(event) {
  const { value, name } = event.target;

  setFullName((prevValue) => {
    if (name === "fName") {
      return {
        fName: value,
        lName: prevValue.lName
      };
    } else if (name === "lName") {
      return {
        fName: prevValue.fName,
        lName: value // 这里修正为大写N的lName
      };
    }
  });
}

更简洁的写法（可选） #

可以使用对象展开运算符简化逻辑，避免重复代码和类似拼写错误：

function handleChange(event) {
  const { value, name } = event.target;
  setFullName(prevValue => ({
    ...prevValue,
    [name]: value
  }));
}

这种写法会保留之前状态的所有属性，只更新当前输入对应的属性，代码更简洁也不容易出错。

内容的提问来源于stack exchange，提问作者Ramboski