Tengo un valor en mi estado para almacenar una lista de ciudades, una casilla de verificación para seleccionarlas en una tabla y un detector de eventos para agregar el valor seleccionado al estado.
Puedo alternar la casilla de verificación una vez, de falso a verdadero. Entonces, no puede cambiar a falso. Estoy registrando el estado y está actualizado correctamente, por lo que no entiendo por qué mi casilla de verificación no está actualizada.
Por ejemplo :
[]["New York"][] , pero no pasa nada en la casilla de verificaciónAquí está el código:
const [selected, setSelected] = useState([]); <input type="checkbox" onChange={(e) => handleRowSelect(e, bpf.city_name)} checked={selected.indexOf(bpf.city_name) > -1} /> const handleRowSelect = (e, city) => { let arr = selected; const index = arr.indexOf(city) if (index === -1) { arr.push(city); } else { arr.splice(index, 1); } setSelected(arr); console.log(arr) console.log(selected) dispatch({ type: 'SET_SEL_BPF', payload: selected }) }Su problema es la inmutabilidad del objeto en React. Cada vez que establece un nuevo estado, debe inicializar un nuevo objeto/matriz para que React comprenda que su objeto/matriz ha cambiado.
En su caso, está utilizando arr.push y arr.splice que mantienen la misma matriz todo el tiempo
El cambio puede ser
const handleRowSelect = (e, city) => { let arr = selected; const index = arr.indexOf(city) if (index === -1) { //create a new array, and add city arr = [...arr, city] } else { //create a new array with `filter` arr = arr.filter((city, index) => index !== arr.length - 1) } setSelected(arr); console.log(arr) console.log(selected) dispatch({ type: 'SET_SEL_BPF', payload: selected }) } O puede probar de esta manera con una nueva inicialización de matriz let arr = [...selected];
const handleRowSelect = (e, city) => { let arr = [...selected]; //create a new array from the existing one const index = arr.indexOf(city) if (index === -1) { arr.push(city); } else { arr.splice(index, 1); } setSelected(arr); console.log(arr) console.log(selected) dispatch({ type: 'SET_SEL_BPF', payload: selected }) }Esto se debe a que está mutando su estado selected .
La línea let arr = selected; no deep copy el estado selected . arr y selected en realidad apuntan al mismo objeto en la memoria.
Esto significa que lo selected se está mutando y no actualizando con un estado completamente nuevo (también conocido como mutado), es decir, cambiando los valores del mismo objeto en lugar de crear un obj completamente nuevo con sus nuevos valores.
Cuando mutas tu estado. React no se actualiza correctamente y es una gran regla en reaccionar nunca mutar su estado.
Considere hacer una copia profunda de su estado y luego mutar esa deep copy y luego configurar seleccionado a esa nueva copia profunda setSelected(*your deep copy*)
Editar: mirando las otras respuestas, CUIDADO con la creación de una copia como let arr = [...selected] . Esto funcionará si la matriz tiene solo un nivel de profundidad. Pero si tiene una matriz de objetos como: let arr = [{}] o matrices anidadas let arr = [[]] los objetos o matrices dentro de {} no serán copias profundas y se mutarán. Causando el mismo problema.