У меня есть объект JSON, который дает мне опции в «Multiselect component» для данной строки, эта строка является значением (значением formik) из другого Select.
{
"Infantil": [
"Infantil"
],
"Ensino Fundamental 1": [
"1º Ano",
"2º Ano",
"3º Ano",
"4º Ano",
"5º Ano"
],
"Ensino Fundamental 2": [
"6º Ano",
"7º Ano",
"8º Ano",
"9º Ano"
],
"Ensino Médio": [
"1º Ano",
"2º Ano",
"3º Ano"
],
"Técnico": [
"Técnico Incompleto",
"Técnico Completo"
],
"Graduação": [
"Graduação Incompleta",
"Graduação Completa"
],
"Pós-Graduação": [
"Mestado Incompleto",
"Mestado Completo",
"Doutorado Incompleto",
"Doutorado Completo"
]
}
Два выбора здесь:
<FormControl
className={classes.formControl}
variant="outlined"
id="levels"
>
<InputLabel id="levels">Níveis de Ensino</InputLabel>
<Select
labelId="levels"
id="levels"
name="levels"
aria-describedby="Níveis Oferecidos pela Instituição"
multiple
value={values.levels}
onChange={handleChange}
onBlur={handleBlur}
input={<Input id="levels" />}
renderValue={(selected) => (
<div className={classes.chips}>
{(selected as string[]).map((value) => (
<Chip key={value} label={value} className={classes.chip} />
))}
</div>
)}
>
{niveis.map((nivel) => (
<MenuItem key={nivel} value={nivel}>
{nivel}
</MenuItem>
))}
</Select>
<FormHelperText>
{errors.levels && touched.levels && errors.levels}
</FormHelperText>
</FormControl>
{/* MULTISELECT years*/}
<FormControl
className={classes.formControl}
variant="outlined"
id="year"
>
<InputLabel id="year">Anos de Ensino</InputLabel>
<Select
labelId="year"
id="year"
name="year"
aria-describedby="Anos Oferecidos pela Instituição"
multiple
value={values.year}
onChange={handleChange}
onBlur={handleBlur}
input={<Input id="year" />}
renderValue={(selected) => (
<div className={classes.chips}>
{(selected as string[]).map((value) => (
<Chip key={value} label={value} className={classes.chip} />
))}
</div>
)}
>
{years["Ensino Médio"].map((ano: string) => (
<MenuItem key={ano} value={ano}>
{ano}
</MenuItem>
))}
</Select>
<FormHelperText>
{errors.year && touched.year && errors.year}
</FormHelperText>
</FormControl>
Единственная проблема, с которой я сталкиваюсь, заключается в том, что я могу сопоставить годы json как этот years["Ensino Médio"].map((ano: string)
Но не так, как здесь, полагая, что только первое имеет значение , И начальное значение всегда допустимо в одной из строк. years[values.levels[0]].map((ano: string)
Поскольку Typescript выдает мне ошибку «Элемент неявно имеет тип 'any', потому что выражение типа 'string' не может использоваться для индексации".
Помним, что существует массив "Niveis"
const niveis = [
"Infantil",
"Ensino Fundamental 1",
"Ensino Fundamental 2",
"Ensino Médio",
"Técnico",
"Graduação",
"Pós-Graduação",
];
И JSON импортируется, а также проходит через интерфейс, чтобы гарантировать тип
import Years from "./years.json";
interface IYears {
Infantil: string[];
"Ensino Fundamental 1": string[];
"Ensino Fundamental 2": string[];
"Ensino Médio": string[];
Técnico: string[];
Graduação: string[];
"Pós-Graduação": string[];
}
const years = Years as IYears;
Большое спасибо всем, кто может помочь!