React Hooks更新Google Calendar API参会人邮箱状态

• 原onChange的更新逻辑直接替换整个formDB的结构：执行setFormDB({ ...formDB.attendees[0], email: e.target.value})后，原本带attendees数组的顶层对象会被替换成仅包含email字段的对象，后续渲染时读取formDB.attendees[0]会因为formDB.attendees为undefined触发类型错误。
• 附带语法问题：JSX中直接写//注释会被渲染为可见文本，代码存在未闭合的<form>开标签，会触发React语法警告。

React嵌套状态更新必须保持不可变性，逐层拷贝需要修改的引用类型字段，不能直接修改原状态。针对更新attendees数组第一个元素邮箱的需求，更新逻辑需满足：

• 浅拷贝顶层formDB对象，保留其他原有字段
• 浅拷贝attendees数组，仅修改索引为0的参会人对象的email值，其余参会人保持不变
• 采用函数式状态更新，避免闭包导致的状态取值过期问题

// 需补充useState导入
import { useState } from 'react';

function App() {
  const [formDB, setFormDB] = useState({
    attendees: [ 
      { email: 'abc1@gmail.com' },
      { email: 'abc2@gmail.com' }
    ]
  });
     
  const handleSubmit = (e) => {
    e.preventDefault();
    gapi.load('client:auth2', () => {
      console.log('loaded client')
      gapi.client.load('calendar', 'v3', () => console.log('bam!'))

      gapi.auth2.getAuthInstance().signIn()
      .then(() => {
        console.log(formDB);
        var request = gapi.client.calendar.events.insert({
          'calendarId': 'primary',
          'resource': formDB,
        })
        // 回调参数重命名，避免覆盖外层formDB状态
        request.execute(res => {
          console.log(res)
          window.open(res.htmlLink)
        })
      })
    })
  }

  return (
    <div className="App">
      {/* JSX注释需用花括号包裹，补充完整form标签并绑定提交事件 */}
      <form onSubmit={handleSubmit}>
        <input
          type="email"
          name="firstAttendeeEmail"
          value={formDB.attendees[0].email}
          onChange={(e) => {
            setFormDB(prevState => ({
              // 保留顶层所有原有属性
              ...prevState,
              // 重新生成attendees数组，仅修改第一个索引的参会人信息
              attendees: prevState.attendees.map((attendee, index) => 
                index === 0 ? { ...attendee, email: e.target.value } : attendee
              )
            }))
          }}
        />
        <input type="submit" name="Confirm" />
      </form>
    </div>
  );
}

• 原代码中request.execute的回调参数命名为formDB，会遮蔽外层的状态变量，易引发逻辑错误，已重命名为res
• 输入框的name属性无需写嵌套路径，按功能语义命名即可
• 如后续需要支持修改任意参会人邮箱，可扩展通用更新方法，当前仅修改第一个参会人场景下上述逻辑完全满足需求

内容的提问来源于stack exchange，提问作者Mohammad Zuha Khalid