在react中将多个用于数组中添加值的useState组合为单个函数

Question

这个问题只是与减少代码复杂性有关。我有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个独立的函数来向数组中添加项目，我怎么能用一个函数来完成这个任务?

Answer 1

不能直接将数组传递给函数，因为数组和setArray函数是不同的。但是你当然可以传入setter函数:

const addToArray = (id, setStateFn) => {
setStateFn((arr) => [...arr, id]);
}
// usage: instead of handleDeleteParking(id)
addToArray(id, setDeleteArray);

Answer 2

你可以创建一个对象来存储你所有的值。

检查下面可能对你有帮助的代码。

const [data, setData] = useState({
deleteParking: [],
newParking: [],
});
const handleChange = (key, id) => {
setData(prev => {
return {
...prev,
[key]: [
...prev[key],
id,
]
}
});
}
handleChange('deleteParking', 1);
handleChange('newParking', 1);

Answer 3

你可以将所有的状态合并为一个状态，然后你可以创建公共函数来更新特定的状态，然后随着数组(更新的数组)你可以传递属性名称。这样的:

const [arrState,setArrayState]=useState({deleteArr:[]});
const commonUpdateFunction=(id, propertyName)=>{
setArrayState (prev=> ({...prev,[propertyName]:[...prev.[propertyName],id]}))
}

在单击

const handleClick=(someId)=>{
commonUpdateFunction(someId,deleteArr)
}