Me gustaría mantener el color del elemento seleccionado en el estado, sin embargo, al cambiar de página (Ej: de 1 a 2 y de vuelta a 1), pierde el color y como estados predeterminados comienzan como falso, se envía una solicitud a eliminar todos los elementos del estado en useEffect.
está filtrando 10 elementos por página, y cuando cambio de página, aparentemente el estado se restablece y comienza desde cero, aunque hay elementos seleccionados en la página.
Tipos
type ISkySelected = { id: string } interface ISkusProps { id: string description: string code_sap: string stock_pe: string stock_atc: string enableSku: boolean skusSelectedList: (selected: ISkySelected) => void removeSkuSelected: (selected: ISkySelected) => void } export function CardList ({ id, description, code_sap, stock_pe, stock_atc, enableSku, skusSelectedList, removeSkuSelected }: ISkusProps) { const [selected, setSelected] = useState<boolean>(false) const [color, setColor] = useState<string>('red.500') const [cursor, setCursor] = useState<string>('') function selectedSku (event: MouseEvent) { event.preventDefault() if (!enableSku) { return } setSelected(!selected) } useEffect(() => { if (selected) { setColor('red.500') skusSelectedList({ id: id }) } if (!selected) { removeSkuSelected({ id: id }) setColor('white') } }, [selected]) useEffect(() => { if (enableSku) { setCursor('pointer') } if (!enableSku) { setSelected(false) setCursor('') } }, [enableSku]) return ( <Box cursor={cursor} borderRadius='2px' overflow='hidden' h='400px' w='225px' mt={5} borderWidth='4px' borderColor={color} onClick={(e) => selectedSku(e)} > ...myComponente </Box> ) })HUELLAS DACTILARES
seleccionó un artículo: ingrese la descripción de la imagen aquí
retroceder una página: ingrese la descripción de la imagen aquí
regresando a la pagina que estaba: ingrese la descripcion de la imagen aqui
El problema es que cuando se desmonta y se vuelve a montar CardList , se reinicializa el estado del componente. Puede almacenar una matriz de ID de tarjetas seleccionadas más arriba en el árbol. Y luego pase el accesorio seleccionado a la tarjeta. Por ejemplo como este:
interface CardProps { id: string; selected: boolean; toggleSelect: (id: string) => void; } const Card = ({ id, selected, toggleSelect }: CardProps) => { const [color, setColor] = useState<string>('red.500'); const handleClick = () => { toggleSelect(id); setColor(selected ? 'red.500' : 'white'); }; return ( <Box onClick={handleClick} color={color}> ...Component </Box> ); }; const List = () => { const [selectedIds, setSelectedIds] = useState<string[]>([]); const toggleCardSelected = (cardId: string) => { const isSelected = selectedIds.includes(cardId); if (isSelected) { setSelectedIds((prev) => prev.filter((id) => id !== cardId)); } else { setSelectedIds((prev) => [...prev, cardId]); } }; return ( <> {cards.map(({ id }) => ( <Card id={id} selected={selectedIds.includes(id)} toggleSelect={toggleCardSelected} /> ))} </> ); };