我有“添加”按鈕，它必須增加項目數組長度并顯示“名稱”和“數量”兩個字段。因此，在任何字段的更改時，我都會將項目詳細信息推送到項目數組中。 items = [ {name: "item 1", quantity: 1}, {name: "item 2", quantity: 1} ];首先，項目數組將為空。單擊 ADD 按鈕時，它應該增加數組長度，然后將數量的默認值設置為 1。我不明白如何實現 add() 來增加數組長度并設置數量的默認值。提前致謝?。?
3 回答
守候你守候我
TA貢獻1802條經驗 獲得超10個贊
正如所討論的，您可以創建一個方法并添加到現有數組中并設置組件狀態。
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
})
})
}
}
達令說
TA貢獻1821條經驗 獲得超6個贊
添加值后使用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 事件）時創建一個新數組，復制舊值并添加新值。
弒天下
TA貢獻1818條經驗 獲得超8個贊
嘗試這個：
let counter = 1
let items = []
function setNewItem() {
items.push({name: `item ${counter}`, quantity: 1})
counter++
}
- 3 回答
- 0 關注
- 163 瀏覽
添加回答
舉報
0/150
提交
取消