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

Posted 2023-03-23

【中文标题】onClick 后对象不断将大小重置为数组

【英文标题】：object keeps resetting size into array after onClick

【发布时间】：2020-11-16 12:19:52

【问题描述】：

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

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

//drink size
const roastedHazelnutSize = e => 
    varname,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 => 
    varname,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>

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

【问题讨论】：

这很奇怪。您是否试图将状态保留在纯 JS 对象变量中？提供整个组件的代码会更有用。

是的，我正在尝试将状态保持在纯 JS 中。所以每当我添加一个新的对象数组时，饮料的大小也会覆盖之前添加的数组。 @WiktorBednarz

我认为将这个状态保持在 React 提供给你的 useEffect 钩子中会是一个更好的解决方案。这种方法非常脆弱，违背了一些非常基本的良好代码标准。 reactjs.org/docs/hooks-effect.html 但是，如果您将其设为标准的、不受控制的形式会更好——因为您不必在发送数据之前对其进行处理。您在此处提供的解决方案很少：medium.com/@ReactEurope/…

【参考方案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]

【讨论】：

哦。有用！但是现在，如果我提交了相同的尺寸，比如 300，但是我对饮料的数量进行了更改，我希望它覆盖初始数组我应该怎么做？ @brijesh-pant

好吧，这当然不是您在上面所做的跟踪订单的最佳方式。 orders 可以作为一个 hashmap 对象，根据订单 ID 作为键来跟踪每个订单。这样，您可以根据订单 ID 单独跟踪和更新每个订单，订单项目为 roastedHazelnutLatte 值。