React中解构对象更新指定用户状态字段报错，求修正方案

你的代码问题出在解构和对象构造时没有使用计算属性名，导致无法动态处理id变量对应的字段：

1. 错误的解构逻辑：const { id,...rest} = user 是提取user中名为id的属性，而不是你从事件中拿到的address/phone这类动态字段，等于没删掉目标旧字段。
2. 错误的新对象构造：{value, ...rest} 是新增一个名为value的字段，而不是把值赋给id对应的字段。

修正后的事件处理函数如下：

const handleUserUpdate = event => {
    const { id, value } = event.target;

    // 用计算属性名删除旧字段，_是占位符，丢弃该字段的值
    const { [id]: _, ...rest } = user;
    // 用计算属性名将新值添加回去，再更新状态
    const newUser = { ...rest, [id]: value };
    setUser(newUser);
};

补充说明： #

• [id]是ES6的计算属性名语法，能让你用变量的值作为对象的属性名，正好匹配输入框id对应的user字段。
• 必须调用setUser才能更新React状态，否则页面不会响应变化。
• 解构时用_作为占位符是常规写法，用来表示我们不需要这个属性的值，你也可以用其他变量名（比如unused）代替。

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