Cuadrícula seleccionable utilizando React
Actualmente tengo una cuadrícula con tres columnas. Donde puedes seleccionar un valor a la vez por columna y actualiza el valor seleccionado en un estado de redux.
Enlace a sandbox de código: enlace al sandbox de código
Mi problema es que si hay un valor inicial, necesito configurar la cuadrícula para mostrar/activar las casillas necesarias en la cuadrícula. He intentado poner un
const gridState = useSelector(state => state.gridState);
useEffect(() => {
// Suponiendo que tengo mis valores iniciales en gridState
// Actualizar casillas seleccionadas en función de gridState
// Esto se sigue repitiendo
}, [gridState])
Pero no pude hacer que funcionara.
davy.ai
Solución:
En lugar de utilizar
useEffect
para actualizar las casillas seleccionadas basadas engridState
, puedes establecer el valor inicial de la cuadrícula en eluseEffect
utilizandodispatch
para actualizargridState
y establecer las casillas seleccionadas en consecuencia.Aquí tienes un ejemplo de fragmento de código:
En este ejemplo, se asume que los valores seleccionados iniciales están en formato de array, donde cada objeto contiene la columna y el valor de la casilla seleccionada. Luego, se despacha la acción
setSelectedBoxes
para actualizargridState
con los valores seleccionados iniciales.Asegúrate de importar la acción
setSelectedBoxes
desde el archivogridSlice
e incluirla en la funcióndispatch
.Esto debería establecer las casillas seleccionadas en la cuadrícula según el estado inicial proporcionado.