這個問題只是與降低代碼復雜性有關。我有 8 個陣列，我必須在其中添加基于按鈕單擊的專案。我所做的是為所有這些任務創建了 8 個單獨的函式。是否有任何解決方案可以將所有這些函陣列合成一個接受陣列作為引數并完成其余作業的函式？
const [deleteArray,setDeleteArray]=useState([]);
const [newArray,setNewArray]=useState([]);
const handleDeleteParking = (id) => {
setDeleteArray((deleteArray) => [...deleteArray, id]);
}
const handleNewParking = (id) => {
setNewArray((newArray) => [...newArray, id]);
}
我總共有 8 個陣列，有 8 個單獨的函式來向陣列中添加專案，我怎樣才能用一個函式來完成這個任務。
uj5u.com熱心網友回復：
您不能只將陣列傳遞給函式，因為陣列和setArray函式是不同的。但是您當然可以傳入 setter 函式：
const addToArray = (id, setStateFn) => {
setStateFn((arr) => [...arr, id]);
}
// usage: instead of handleDeleteParking(id)
addToArray(id, setDeleteArray);
uj5u.com熱心網友回復：
您可以創建一個物件來存盤您的所有值。
檢查以下可能對您有所幫助的代碼。
const [data, setData] = useState({
deleteParking: [],
newParking: [],
});
const handleChange = (key, id) => {
setData(prev => {
return {
...prev,
[key]: [
...prev[key],
id,
]
}
});
}
handleChange('deleteParking', 1);
handleChange('newParking', 1);
uj5u.com熱心網友回復：
您可以將所有狀態合并為一個狀態，然后您可以創建通用函式來更新特定狀態，然后連同陣列（更新陣列）一起傳遞屬性名稱。像這樣
const [arrState,setArrayState]=useState({deleteArr:[]});const commonUpdateFunction=(id, propertyName)=>{ setArrayState (prev=> ({...prev,[propertyName]:[...prev.[propertyName],id]})) }
點擊時
const handleClick=(someId)=>{ commonUpdateFunction(someId,deleteArr) }
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/459019.html
標籤：javascript 反应
上一篇：如何強制瀏覽器中止所有XHR請求