侃侃無(wú)極
2023-08-24 18:04:16
所以我有這個(gè)按鈕來(lái)添加一個(gè)項(xiàng)目來(lái)存儲(chǔ),你不能添加多個(gè)項(xiàng)目,但是當(dāng)我單擊該按鈕兩次或多次時(shí),它會(huì)重新渲染兩個(gè)組件兩次,我嘗試使用 useMemo 來(lái)記住該值,但它不起作用并得到e.target 中的(目標(biāo))未定義const handleAdd = useMemo((e) => { let newItem = {id : e.target.name, price: e.target.value, title: e.target.title, contity: 1} item.push(newItem) const unique = Array.from(new Set(item.map(i => i.id))).map(id =>{return item.find(i => i.id === id)}) setItem(unique)}),[item])useMemo 的任何解決方案或任何其他想法來(lái)避免這種不必要的渲染..
1 回答

狐的傳說(shuō)
TA貢獻(xiàn)1804條經(jīng)驗(yàn) 獲得超3個(gè)贊
這可以在沒(méi)有任何這些花哨的鉤子的情況下完成。
您的代碼可以在嘗試更新之前簡(jiǎn)單地檢查該項(xiàng)目是否已存在于數(shù)組中:
const handleAdd = (e) => {?
? const newId = e.target.name
? const itemFound = item.find((i) => i.id === newId)
? if (!itemFound) {
? ? const newItem = {id : e.target.name, price: e.target.value, title: e.target.title, contity: 1}?
? ? // Using spread to avoid mutability
? ? const updatedItem = [...item, newItem]
? ? setItem(updatedItem)
? }
}
添加回答
舉報(bào)
0/150
提交
取消