如何在onChange事件中设置React嵌套对象的属性值？

错误点分析 #

1. 初始state语法错误：email:后缺少值和逗号，正确写法应为email: '',，否则会触发基础语法报错。
2. setState对象字面量语法错误：直接在对象字面量中写address.fhbca: e.target.value不符合JS语法规则——对象键不能用点表达式；同时这种写法会错误地把address.fhbca当作顶级键，而非嵌套在address下的属性，还会丢失address内的其他原有属性。

正确的嵌套属性更新方式 #

要更新嵌套对象的属性，需逐层解构原有对象，保留未修改的属性后再替换目标值：

方式1：嵌套展开运算符写法

onChange={(e) => {
  setState({
    ...state, // 保留fullname、email等顶级属性
    address: {
      ...state.address, // 保留street、landmark、pincode等address内的属性
      fhbca: e.target.value // 更新目标属性
    }
  });
}}

方式2：函数式更新（推荐依赖前一次state的场景）

如果更新逻辑依赖前一次的state状态，用函数式更新可避免异步更新导致的错误：

onChange={(e) => {
  setState(prevState => ({
    ...prevState,
    address: {
      ...prevState.address,
      fhbca: e.target.value
    }
  }));
}}

修正后的完整初始state #

先补全初始state的语法错误：

const [state, setState] = useState({
  fullname: '',
  email: '',
  address: {
    fhbca: '',
    street: '',
    landmark: '',
    pincode: '',
  }
});

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