javascript - 将新的对象数组附加到状态 React Hooks 的当前对象

Question

这是我目前的数据

const [propertyData, setPropertyData] = useState({
    propertyName: '',
    contacts: [
     {
       contactName: 'Person1',
       contactNumber: 'Number1',
     },
     {
       contactName: 'Person2',
       contactNumber: 'Number2',
     },
    ]
})

我想要实现的是添加另一个对象来contacts喜欢这个

contacts: [
     {
       contactName: 'Person1',
       contactNumber: 'Number1',
     },
     {
       contactName: 'Person2',
       contactNumber: 'Number2',
     },
     {
       contactName: 'Person3',
       contactNumber: 'Number3',
     },
    ]

我正在做的是这个

setPropertyData({
  ...propertyData,
  contacts: [{ ...propertyData.contacts, contactPerson: 'Person3', contactNumber: 'Number3', }]
})

但它的作用是只用新数据更新当前数据，而没有像这样的旧数据

contacts: [
     {
       contactName: 'Person3',
       contactNumber: 'Number3',
     },
    ]

我总是对使用扩展运算符感到困惑，特别是如果它是一个数组或我必须附加到的对象。请帮忙。谢谢！

标签： javascriptreactjs

Answer 1

您可以使用此语法将新对象添加到对象数组中：

setPropertyData({
  ...propertyData,
  contacts: [...propertyData.contacts, { contactPerson: 'Person3', contactNumber: 
            'Number3' }]
})