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

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 = arr

arr.push(1) // [1]

arr === arrCopy // true

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

arr === arrCopy // false

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

Answer 3

尝试这个：

let counter = 1

let items = []

function setNewItem() {

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

    counter++

}