React Hooks中useState处理谷歌自动填充表单变更事件的疑问

嘿，我来帮你拆解这个问题～

你担心用谷歌自动填充时，一次性更新所有字段会让你的条件判断逻辑出问题，这种顾虑其实挺合理的，但实际没崩溃的原因和浏览器自动填充的事件触发机制有关：

当谷歌自动填充表单的多个字段时，浏览器并不是一次性把所有字段的值都塞进去然后触发一次变更事件，而是会逐个对每个输入框触发change事件。也就是说：

• 先填充fName，触发一次update函数，此时name为fName，对应你第一个if判断，正确更新名字，同时保留lName和email的原有状态；
• 接着填充lName，再触发一次update，name为lName，对应第二个判断，更新姓氏；
• 最后填充email，触发第三次update，更新邮箱字段。

每次setContact都是基于上一次的正确状态（prevValue）来更新，所以不会出现丢失其他字段值的情况，代码自然能正常运行。

另外，其实你的update函数可以大幅简化，不用写这么多if判断，利用ES6的扩展运算符就能更优雅地处理状态更新：

function update(events) {
  const { name, value } = events.target;

  setContact((prevValue) => {
    return {
      ...prevValue,
      [name]: value
    };
  });
}

这种写法会把之前的状态全部展开，然后只覆盖当前name对应的字段值，逻辑更清晰，也避免了漏写判断条件的风险。

最后补充一句：不同浏览器的自动填充事件表现可能略有差异，但现代浏览器（比如你用的Chrome和Brave）都会遵循逐个触发change事件的逻辑，React对这些原生事件的处理也做了兼容，所以你的代码能稳定工作。

备注：内容来源于stack exchange，提问作者Amritansu Aditya