Estoy tratando de actualizar simultáneamente los valores de 2 objetos dentro de una matriz cuando se llama a una función onClick. Actualmente, puedo disminuir el valor objetivo (seleccionado) en 1 (por ejemplo, -1), pero necesito sugerencias para mi próxima expectativa:
Si existe un valor anterior (por ejemplo, se selecciona una opción) y selecciono una opción diferente (botón de radio), espero que el valor anterior aumente en 1 (+1) simultáneamente con el nuevo valor que se reduce.
Estructura de matriz:
`(4) [{…}, {…}, {…}, {…}] 0: {name: 'Space pod', total_no: 2, max_distance: 200, speed: 2} 1: {name: 'Space rocket', total_no: 1, max_distance: 300, speed: 4} 2: {name: 'Space shuttle', total_no: 1, max_distance: 400, speed: 5} 3: {name: 'Space ship', total_no: 2, max_distance: 600, speed: 10}`Actual:
const handleVehiceChange = (e) => { setValue(e.target.value); setVehiclesData( vehiclesData.map((vehicle) => vehicle.name === e.target.value ? { ...vehicle, total_no: vehicle.total_no - 1 } : vehicle ) )};En lugar de sobrescribir el estado anterior con el nuevo estado con un total_no decrementado, tendría una función que calcula el resultado decrementado sin poner el resultado en el estado. Esto facilita cambiar entre los nombres seleccionados para disminuir.
const handleVehiceChange = (e) => { setValue(e.target.value); }; const makeMergedData = () => vehiclesData.map((vehicle) => vehicle.name === value // from state ? { ...vehicle, total_no: vehicle.total_no - 1 } : vehicle ); Luego reemplace los consumidores de VehiclesData con vehiclesData makeMergedData() .
Si los datos de los vehiclesData no se cambian en ningún otro lugar, esto podría permitirle eliminarlo del estado por completo.