reactjs - Argument of type 'IAulasAdicionais[]' is not assignable to parameter of type 'string'

Question

everyone i have one problem to solve into my application but i don't know how i can do this i hope someone else help me, my problem is one error into my code, in bellow of my code have some prints of this issue,

Mock data:

"AulasAdicionais": [
    {
      "Periodo": "1",
      "HorarioInicio": "2021-01-19T07:30:00-0300",
      "HorarioTermino": "2021-01-19T08:30:00-0300",
      "IdDisciplina": "396",
      "DescricaoDisciplina": "Matemática",
      "DescricaoReduzidaDisciplina": "Mat",
      "DescricaoTurno": "Manh?",
      "IdEstabelecimento": "43",
      "DescricaoEstabelecimento": "Colégio Correio Lima",
      "TipoSituacaoHorario": "Normal"
    }
  ]

Service

export interface IAulasAdicionais {
  Periodo: string;
  HorarioInicio: string;
  HorarioTermino: string;
  IdDisciplina: string;
  DescricaoDisciplina: string;
  DescricaoReduzidaDisciplina: string;
  DescricaoTurno: string;
  IdEstabelecimento: string;
  DescricaoEstabelecimento: string;
  TipoSituacaoHorario: string;
}

export interface IAgendaAulas {  
  AulasAdicionais: IAulasAdicionais[];

}

const getAgendaAulas = async (dataAula: string ) : Promise<IAgendaAulas[] | undefined> => {
  try {
    const { data } = await Api().get<IAgendaAulas[]>(
      `/agenda-aulas?DataAula=${dataAula}`
    );
    if (data) {
      return data;
    } else {
      return undefined;
    }
  } catch (error) {
    return undefined;
  }
};

TSX:

interface IAgendasAulasProps {
  aulasAdicionais: IAulasAdicionais[];
}

export const AulasAdicionaisRecuperacao: React.FC<IAgendasAulasProps> = ({
  aulasAdicionais,
}) => {
  const classes = useStyles();
  const [aulaAdicionais, setAulasAdicionais] = useState<
    IAulasAdicionais[]
  >();

  useEffect(() => {
    AgendaTurmaService.getAgendaAulas(aulasAdicionais "O problema está aqui" ).then((data) => {
      if (data) {
        setAulasAdicionais(data "e aqui");
      } else {
        setAulasAdicionais([]);
      }
    });
  }, [aulasAdicionais]);

{aulaAdicionais?.map((horario, horarioIndex) => (
        <>
          <Grid container spacing={2} key={horarioIndex}>
            <Grid item lg={2}>
              <Box margin={1}>
                <Paper className={classes.root}>
                  <Box marginTop={2} marginLeft={1}>
                    <ClassIcon color="primary" style={{ fontSize: 90 }} />
                    <Box display="flex" marginTop={-10} marginLeft={12}>
                      <Typography>{horario?.DescricaoDisciplina}</Typography>
                    </Box>
                  </Box>
                </Paper>
              </Box>
            </Grid>
          </Grid>
        </>
      ))}

Here is a prints of my issues, i try many things but din't work and I didn't find anything in web if solve my problem !

question from:https://stackoverflow.com/questions/65890345/argument-of-type-iaulasadicionais-is-not-assignable-to-parameter-of-type-st

Answer 1

Be careful to set the proper type to useState. When you set aulaAdicionais you're using IAgendaAulas instead of IAulasAdicionais.

Try these changes:

const getAgendaAulas = async (dataAula: string ) : Promise<IAgendaAulas | undefined> => {

setAulasAdicionais(data.AulasAdicionais);