我有“添加”按鈕，它必須增加項(xiàng)目數(shù)組長度并顯示“名稱”和“數(shù)量”兩個字段。因此，在任何字段的更改時，我都會將項(xiàng)目詳細(xì)信息推送到項(xiàng)目數(shù)組中。 items = [ {name: "item 1", quantity: 1}, {name: "item 2", quantity: 1} ];首先，項(xiàng)目數(shù)組將為空。單擊 ADD 按鈕時，它應(yīng)該增加數(shù)組長度，然后將數(shù)量的默認(rèn)值設(shè)置為 1。我不明白如何實(shí)現(xiàn) add() 來增加數(shù)組長度并設(shè)置數(shù)量的默認(rèn)值。提前致謝??！
3 回答
守候你守候我
TA貢獻(xiàn)1802條經(jīng)驗(yàn) 獲得超10個贊
正如所討論的，您可以創(chuàng)建一個方法并添加到現(xiàn)有數(shù)組中并設(shè)置組件狀態(tài)。
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
})
})
}
}
達(dá)令說
TA貢獻(xiàn)1821條經(jīng)驗(yàn) 獲得超6個贊
添加值后使用Array.push不會創(chuàng)建新數(shù)組。您可以在瀏覽器控制臺中對此進(jìn)行測試：
let arr = []
let arrCopy = arr
arr.push(1) // [1]
arr === arrCopy // true
arr = [...arr, 2] // [1, 2]
arr === arrCopy // false
由于 React===在內(nèi)部使用比較狀態(tài)并決定重新渲染，如果您使用 arr.push({ name: "item 3", amount: 1 })，UI 將不會更新。相反，您需要每次按下按鈕（處理 onClick 事件）時創(chuàng)建一個新數(shù)組，復(fù)制舊值并添加新值。
弒天下
TA貢獻(xiàn)1818條經(jīng)驗(yàn) 獲得超8個贊
嘗試這個：
let counter = 1
let items = []
function setNewItem() {
items.push({name: `item ${counter}`, quantity: 1})
counter++
}
- 3 回答
- 0 關(guān)注
- 162 瀏覽
添加回答
舉報
0/150
提交
取消