Esta pregunta solo está relacionada con la reducción de la complejidad del código. Tengo 8 matrices, en las que tengo que agregar elementos en función de un clic de botón. lo que hice fue hacer 8 funciones separadas para todas estas tareas. ¿Hay alguna solución para combinar todas estas funciones en una sola función que acepte una matriz como parámetro y haga el resto del trabajo?
const [deleteArray,setDeleteArray]=useState([]); const [newArray,setNewArray]=useState([]); const handleDeleteParking = (id) => { setDeleteArray((deleteArray) => [...deleteArray, id]); } const handleNewParking = (id) => { setNewArray((newArray) => [...newArray, id]); }Tengo un total de 8 matrices con 8 funciones separadas para agregar elementos a la matriz, ¿cómo puedo lograr esta tarea con una sola función?
No puede simplemente pasar la matriz a la función, ya que la matriz y la función setArray son diferentes. Pero, por supuesto, puede pasar la función setter en su lugar:
const addToArray = (id, setStateFn) => { setStateFn((arr) => [...arr, id]); } // usage: instead of handleDeleteParking(id) addToArray(id, setDeleteArray);Podría haber creado un objeto que almacenará todos sus valores.
Verifique el siguiente código que puede ayudarlo.
const [data, setData] = useState({ deleteParking: [], newParking: [], }); const handleChange = (key, id) => { setData(prev => { return { ...prev, [key]: [ ...prev[key], id, ] } }); } handleChange('deleteParking', 1); handleChange('newParking', 1);Puede fusionar todo su estado en un solo estado y luego puede crear una función común para actualizar un estado particular y luego, junto con la matriz (matriz actualizada), puede pasar el nombre de la propiedad. Como esto:
const [arrState,setArrayState]=useState({deleteArr:[]}); const commonUpdateFunction=(id, propertyName)=>{ setArrayState (prev=> ({...prev,[propertyName]:[...prev.[propertyName],id]})) }Al hacer clic
const handleClick=(someId)=>{ commonUpdateFunction(someId,deleteArr) }