Поле MultiSelection в TypeScript JSON Проблема - PullRequest
0 голосов
/ 13 апреля 2020

У меня есть объект 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;

Большое спасибо всем, кто может помочь!

...