React如何用一行代码更新嵌套对象的状态属性？

当然可以用一行代码实现嵌套对象属性的更新，你之前的错误写法是因为没有正确解构原有的address对象，直接赋值会覆盖整个address，而且语法也不合法。

针对单个嵌套属性（比如mainAddress），正确的一行代码写法如下：

<input 
  type="text" 
  name="mainAddress" 
  id="mainAddress" 
  onChange={(e) => setFormPatient({ ...formPatient, address: { ...formPatient.address, mainAddress: e.target.value } })} 
/>

这里的逻辑很清晰：

• 先展开原有的formPatient对象，保留所有非嵌套属性
• 针对address属性，展开原有的address对象，只替换需要更新的目标属性，确保其他嵌套属性不会被覆盖

如果想让onChange逻辑更通用，适配所有嵌套属性（比如address.numberAddress、address.zipCode等），可以给input的name设置成address.mainAddress这种层级格式，用一行代码实现通用处理：

<input 
  type="text" 
  name="address.mainAddress" 
  id="mainAddress" 
  onChange={(e) => {
    const [parentKey, childKey] = e.target.name.split('.');
    setFormPatient({ ...formPatient, [parentKey]: { ...formPatient[parentKey], [childKey]: e.target.value } });
  }} 
/>

这种写法不用为每个嵌套属性单独编写更新逻辑，复用性更强。

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