onClick 后对象不断将大小重置为数组

Question

我正在尝试提交一个表单，但是，当我在更改大小值时再次双重提交时，它会覆盖第一个对象的选择。我正在使用 react-redux。在传递第二个数组之前，我尝试使用逻辑来选择正确的值。这些是我的代码。

    var roastedHazelnutLatte = {
    name:'Roasted Hazelnut Latte',
    size: 0,
    price:5,
    regularQty:0,
    oatlyQty:0,
    customisation: ''
} 

//drink size
const roastedHazelnutSize = e => {
    var{name,value} = e.target;
    var value = parseInt(value,10)
    roastedHazelnutLatte.size = value
}
//drink quantity
const roastedHazelnutRegularQty = e => {
    var {name,value} =e.target;
    var value = parseInt(value,10)
    roastedHazelnutLatte.regularQty = value
}
const roastedHazelnutOatlyQty = e => {
    var{name,value} = e.target
    var value = parseInt(value,10)
    roastedHazelnutLatte.oatlyQty = value
}
//drink customisation
const roastedHazelnutCustomisation = e => {
    const {name,value}=e.target;
    roastedHazelnutLatte.customisation = value
}
//on click add name of drink: hazelnut latte
const addHazelnutLatte = e => {
    e.preventDefault()
    addItem.orders.push(roastedHazelnutLatte)
    console.log(addItem)
}`

下拉代码：

<Input type='select' name='size' onChange={e=>roastedHazelnutSize(e)}>
    <option>Select</option>
    <option value={300}>300ml</option>
    <option value={1000}>1L</option>
</Input>

点击代码：

<Button onClick={e=>addHazelnutLatte(e)}> Add</Button>

我正在考虑设置状态。但我也不太清楚该怎么做。

Answer 1

数组中第一个对象发生变化的原因是roastedHazelnutLatte 对象引用始终保持不变，即使您将它推入数组orders 之后也是如此。 您应该将功能更新为此

const addHazelnutLatte = e => {
    e.preventDefault()
    addItem.orders.push({...roastedHazelnutLatte})
    console.log(addItem)
}

举个例子

const obj ={a: 1, b: 2}
const arr = []
arr.push(obj)
obj.a = 5;
arr.push(obj)
console.log(arr) // would result [a: 5, b: 2}, a: 5, b: 2}]

要解决此问题，您可以使用 ES6 扩展运算符或 Object.assign 创建一个新对象，但这又会在对象上执行浅拷贝而不是深拷贝。

const obj ={a: 1, b: 2}
const arr = []
arr.push({...obj})
obj.a = 5;
arr.push({...obj})
console.log(arr) // would result [a: 1, b: 2}, a: 5, b: 2}]