如何在 ReactJs 中将对象添加到数组状态？答案

【问题标题】：How to Add Object to Array State in ReactJs?如何在 ReactJs 中将对象添加到数组状态？
【发布时间】：2023-01-14 09:41:07
【问题描述】：

我有这个对象状态数组，它工作正常。我需要动态地向它添加另一个对象。

const [productData, SetProductData] = useState({
    sizes: [
        {id: 2, value: 'Small', isActive: false},
        {id: 2, value: 'Medium', isActive: false},
        {id: 2, value: 'Large', isActive: true},
        {id: 2, value: 'X Large', isActive: false},
        {id: 2, value: 'XX Large', isActive: false}
    ]
})

我试着这样做，但没有用

const addObjectToArray = obj => {
    SetProductData(current => [...current, obj]);
};

addObjectToArray( {id: 3, value: 'XXX Large', isActive: true} )

我还需要动态更新它

【问题讨论】：

标签： reactjs react-hooks rxjs

【解决方案1】：

您需要在您的州保持相同的结构。您有一个对象，您正在将其更改为一个数组。所以


const addObjectToArray = obj => {
  SetProductData(current => ({
    ...current,
    sizes: [...current.sizes, obj]
  }));
};

addObjectToArray( {id: 3, value: 'XXX Large', isActive: true} )

【讨论】：