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

Question

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

因此，在任何字段的更改时，我都会将项目详细信息推送到项目数组中。

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

首先，项目数组将为空。单击 ADD 按钮时，它应该增加数组长度，然后将数量的默认值设置为 1。

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

提前致谢！！

Answer 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      })    })  }}

Answer 2

添加值后使用Array.push不会创建新数组。您可以在浏览器控制台中对此进行测试：let arr = []let arrCopy = arrarr.push(1) // [1]arr === arrCopy // truearr = [...arr, 2] // [1, 2]arr === arrCopy // false由于 React===在内部使用比较状态并决定重新渲染，如果您使用 arr.push({ name: "item 3", amount: 1 })，UI 将不会更新。相反，您需要每次按下按钮（处理 onClick 事件）时创建一个新数组，复制旧值并添加新值。

Answer 3

尝试这个：let counter = 1let items = []function setNewItem() {    items.push({name: `item ${counter}`, quantity: 1})    counter++}