Reactjs 对象在onClick之后继续将大小重置为数组

我正在尝试提交表单，但是，当我在更改大小值的同时再次双击提交时，它会覆盖第一个对象的选择。我用的是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>

roastedHazelnutSize（e）}>
挑选
300毫升
1L

onClick代码：

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

addHazelnutLatte（e）}>Add

---

我正在考虑设置状态。但是我也不太确定如何处理它。

数组中第一个对象被更改的原因是，

roastedHazelnutLatte

对象引用始终保持不变，即使您将其按数组

顺序推送。
您应该将函数更新为此

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 spread运算符或，
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}]

在数组中更改第一个对象的原因是，即使在将对象按数组
顺序
推送之后，
roastedHazelnutLatte
对象引用始终保持不变。
您应该将函数更新为此

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 spread运算符或，
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}]

这很奇怪。您是否试图将状态保持在纯JS对象变量中？提供整个组件的代码会更有用。是的，我正试图将状态保持在纯JS中。因此，每当我添加一个新的对象数组时，饮料的大小也会覆盖以前添加的数组@WiktorBednarzI认为，将此状态保持在React提供给您的
useffect
hook内是一个更好的解决方案。这种方法非常脆弱，不符合一些非常基本的好代码标准。但是，如果您将其作为一个标准的、不受控制的表单，那就更好了，因为您不必在发送数据之前处理数据。这里几乎没有可用的解决方案：这很奇怪。您是否试图将状态保持在纯JS对象变量中？提供整个组件的代码会更有用。是的，我正试图将状态保持在纯JS中。因此，每当我添加一个新的对象数组时，饮料的大小也会覆盖以前添加的数组@WiktorBednarzI认为，将此状态保持在React提供给您的
useffect
hook内是一个更好的解决方案。这种方法非常脆弱，不符合一些非常基本的好代码标准。但是，如果您将其作为一个标准的、不受控制的表单，那就更好了，因为您不必在发送数据之前处理数据。你这里几乎没有什么解决方案：哦。它起作用了！但是现在，如果我提交了相同的大小，比如300，但是我更改了饮料的数量，我希望它覆盖最初的数组，我应该怎么做呢@brijesh pantwell，当然这不是像上面那样跟踪订单的最佳方式<代码>订单
可以成为hashmap对象，它根据订单id作为键跟踪每个订单。通过这种方式，您可以根据订单id单独跟踪和更新每个订单，订单项为
roastedHazelnutLatte
value.oh。它起作用了！但是现在，如果我提交了相同的大小，比如300，但是我更改了饮料的数量，我希望它覆盖最初的数组，我应该怎么做呢@brijesh pantwell，当然这不是像上面那样跟踪订单的最佳方式<代码>订单
可以成为hashmap对象，它根据订单id作为键跟踪每个订单。通过这种方式，您可以根据订单id单独跟踪和更新每个订单，订单项为
roastedHazelnutLatte
值。