如何在单击添加按钮时增加现有数组的长度答案

【问题标题】：How to increment existing arrays length on click of add button如何在单击添加按钮时增加现有数组的长度
【发布时间】：2020-07-13 09:54:22
【问题描述】：

我有一个添加按钮，它必须增加项目数组长度并显示两个字段，即“名称”和“数量”。

所以任何字段的 onChange，我都在 items 数组中推送项目详细信息。

 items = [ {name: "item 1", quantity: 1}, {name: "item 2", quantity: 1} ];

一开始，items 数组是空的。单击添加按钮时，它应该增加数组长度，然后将数量的默认值设置为 1。

我不明白，如何实现 add() 来增加数组长度和设置数量的默认值。

提前致谢！！

【问题讨论】：

什么是应用程序？？更多代码.. 反应 jquery ??代码是什么
请简单的代码..解释一下，你做了什么
请发布您的尝试minimal reproducible example，并具体说明您遇到的问题。人们会很乐意提供帮助。
“它应该增加数组长度，然后将数量的默认值设置为 1” 您的意思是将字段 quantity 的值设置为数组中的所有项目？
@xdeepakv 我正在使用反应

标签： javascript html node.js reactjs

【解决方案1】：

如前所述，您可以创建一个方法并在现有数组中添加并设置组件状态。

class SomeComponent {
  constructor(){
    this.state.products =[]
  }
  onAddProduct(item) {
    this.setState({
      products: this.state.products.concat({name: item, quantity: 1})
    })
  }
  onAddProductByName(name) {
    this.setState({
      products: this.state.products.map(item => {
        if(item.name === name) item.quantity +=1 
        return item
      })
    })
  }
}

【讨论】：

【解决方案2】：

使用Array.push 不会在添加值后创建新数组。您可以在浏览器控制台中对此进行测试：

let arr = []
let arrCopy = arr

arr.push(1) // [1]
arr === arrCopy // true

arr = [...arr, 2] // [1, 2]
arr === arrCopy // false

由于 React 在内部使用 === 来比较状态并决定重新渲染，如果您使用 arr.push({ name: "item 3", quantity: 1 })，UI 将不会更新。相反，您需要在每次按下按钮时（处理 onClick 事件）创建一个复制旧值的新数组并添加新值。

【讨论】：

【解决方案3】：

试试这个：

let counter = 1
let items = []

function setNewItem() {
    items.push({name: `item ${counter}`, quantity: 1})
    counter++
}

【讨论】：