Tengo la siguiente enumeración y estado:
enum FilterId { filter1, filter2, filter3, filter4, filter5, } type FiltersInComponent = { [key in FilterId]: boolean }; const [appliedFilters, setAppliedFilters] = React.useState<FiltersInComponent>() Pregunta 1: ¿Cómo inicializo el estado de los appliedFilters a (en notación abreviada):
{ filter1: false, filter2: false, filter3: false, filter4: false, filter5: false } Pregunta 2: ¿Cómo appliedFilters los filtros aplicados y muestro una casilla de verificación? Tengo lo siguiente hasta ahora:
{Object.keys(appliedFilters) .filter((v) => !isNaN(Number(v))) .map((option) => { const isChecked: boolean = appliedFilters[option]; return ( <> <Checkbox checked={isChecked} /> <Typography> {optionMessage(Number(option))} </Typography> </> ); })} Pero recibo el siguiente error para appliedFilters[option]
Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'FiltersInComponent'. No index signature with a parameter of type 'string' was found on type 'FiltersInComponent'.El problema está en la forma en que ha definido esta enumeración.
Estás buscando algo más en este sentido:
type FilterId = 'filter1' | 'filter2' | 'filter3' | 'filter4' | 'filter5' const foo = () => { type FiltersInComponent = { [key in FilterId]: boolean } const [appliedFilters, setAppliedFilters] = React.useState<FiltersInComponent>({ filter1: false, filter2: false, filter3: false, filter4: false, filter5: false, }) Como lo tiene ahora [key in FilterId] evalúa como
type FiltersInComponent = { 0: boolean; 1: boolean; 2: boolean; 3: boolean; 4: boolean; } como sus valores de enumeración son los valores predeterminados de 0,1,2, etc. Si lo desea, podría agregar valores de enumeración de 'filter1', etc. y luego usar una plantilla de cadena literal para extraer type FilterIdType = ${FilterId} ; Pero si va a modificar su enumeración y tener control sobre ella, es mejor que opte por el tipo de unión más simple.