Reactjs 使用挂钩更新对象数组内的值

我正在尝试使用Google日历API添加会议事件。在我想更新我的电子邮件在下面的ela对象使用挂钩，我的意思是说，我想更新我的电子邮件abc1@gmail.com

“与会者”：[{'email'：'abc1@gmail.com“}，]

每次我使用给定的表单进行输入时

    function App() {
      var ela={
        'attendees': [ 
          {'email': 'abc1@gmail.com'},
          {'email': 'abc2@gmail.com'}
        ]
      }
      const [formDB,setFormDB]=useState(ela);
         
      const handleClick = (e) => {
        e.preventDefault();
        gapi.load('client:auth2', () => {
          console.log('loaded client')
    
          gapi.client.load('calendar', 'v3', () => console.log('bam!'))
    
          gapi.auth2.getAuthInstance().signIn()
          .then(() => {
            
           // var event=formDB;
            console.log(formDB);
            var request = gapi.client.calendar.events.insert({
              'calendarId': 'primary',
              'resource': formDB,
            })
    
              request.execute(formDB => {
              console.log(formDB)
              window.open(formDB.htmlLink)
            })}
    
    
      return (
        <div className="App">
         // I need to fix this onChange eventin following input. Everytime I am trying to change using below logic it's saying 
         <input
            type="email"
            name="formDB.attendees[0].email"
            value={formDB.attendees[0].email}
            onChange={e=>setFormDB({ ...formDB.attendees[0], email: e.target.value})}  **fix this**
          />
         <input type="submit" name="Confirm" />
        </form>
         </div>
      );
    }

函数应用程序（）{
瓦尔埃拉={
“与会者”：[
{'email'：'abc1@gmail.com'},
{'email'：'abc2@gmail.com'}
]
}
const[formDB，setFormDB]=useState（ela）；
常量handleClick=（e）=>{
e、 预防默认值（）；
load（'client:auth2'，（）=>{
console.log（'loaded client'）
gapi.client.load（'calendar'，'v3'，（）=>console.log（'bam！'））
gapi.auth2.getAuthInstance（）.signIn（）
.然后（（）=>{
//var事件=formDB；
console.log（formDB）；
var request=gapi.client.calendar.events.insert({
'日历ID'：'主要'，
“资源”：formDB，
})
request.execute（formDB=>{
console.log（formDB）
window.open（formDB.htmlink）
})}
返回(
//我需要在下面的输入中修复onChange事件。每次我尝试使用下面的逻辑进行更改时，它都会说
setFormDB（{…formDB.Attendes[0]，电子邮件：e.target.value}}**修复此问题**
/>
);
}

问题-状态形状突变 您正在从更改状态形状

{ attendees: [] }

到

不再存在

formDB.Attendes

数组，因此尝试访问

formDB.Attendes[0]

会引发错误，因为

formDB.Attendes

未定义

解决方案-保持状态不变 似乎您正在尝试更新数组中的第一封电子邮件。在react状态下更新数组中的值时，您需要浅层复制整个数组，然后更新索引/元素。事实上，在更新任何嵌套状态时，您需要浅层复制正在更新的任何嵌套对象

<input
  type="email"
  name="formDB.attendees[0].email"
  value={formDB.attendees[0].email}
  onChange={e => setFormDB({
    ...formDB,
    attendees: formDB.attendees.map((el, i) => i === 0 ? { email: e.target.value } : el)
  })}
/>

setFormDB({
…formDB，
与会者：formDB.attendes.map（（el，i）=>i==0？{email:e.target.value}:el）
})}
/>

或者，由于您总是更新第一封电子邮件，您可以创建一个新数组，替换其余与会者数组中的第一个元素和切片

<input
  type="email"
  name="formDB.attendees[0].email"
  value={formDB.attendees[0].email}
  onChange={e => setFormDB({
    ...formDB,
    attendees: [{ email: e.target.value }, ...formDB.attendees.slice(1)],
  })}
/>

setFormDB({
…formDB，
与会者：[{email:e.target.value}，…formDB.attendes.slice（1）]，
})}
/>

您使用一个包含数组“Attendes”的对象初始化状态。但您的onChange会用您的第一个attendee条目覆盖它。之后就没有数组，所有索引器访问都会失败。谢谢您的快速响应。是的，我找不到了。

<input
  type="email"
  name="formDB.attendees[0].email"
  value={formDB.attendees[0].email}
  onChange={e => setFormDB({
    ...formDB,
    attendees: formDB.attendees.map((el, i) => i === 0 ? { email: e.target.value } : el)
  })}
/>

<input
  type="email"
  name="formDB.attendees[0].email"
  value={formDB.attendees[0].email}
  onChange={e => setFormDB({
    ...formDB,
    attendees: [{ email: e.target.value }, ...formDB.attendees.slice(1)],
  })}
/>