2
respostas

[Dúvida] Problema ".map is not a fuction"

Boa tarde, seguinte, Usei o exemplo dessa aula para consumir uma api rest que eu fiz:

const AdministracaoTecnico = () => {

const [tecnicos, setTecnicos] = useState<ITecnico[]>([])

useEffect(() => {
    http.get<ITecnico[]>('tecnico/')
        .then(resposta => setTecnicos(resposta.data))
}, [])

const excluir = (tecnicoAhSerExcluido: ITecnico) => {
    http.delete(`tecnico/${tecnicoAhSerExcluido.id}/`)
        .then(() => {
            const listaTecnicos = tecnicos.filter(tecnico => tecnico.id !== tecnicoAhSerExcluido.id)
            setTecnicos([...listaTecnicos])
        })


}

return (
    <TableContainer component={Paper}>
        <Table>
            <TableHead>
                <TableRow>
                    <TableCell>
                        Nome
                    </TableCell>
                    <TableCell>
                        Editar
                    </TableCell>
                    <TableCell>
                        Excluir
                    </TableCell>
                </TableRow>
            </TableHead>
            <TableBody>
                {tecnicos.map(tecnico => <TableRow key={tecnico.id}>
                    <TableCell>
                        {tecnico.nome}
                    </TableCell>
                    <TableCell>
                        [ <RouterLink to={`tecnico/${tecnico.id}`}>editar</RouterLink> ]
                    </TableCell>
                    <TableCell>
                        <Button variant="outlined" color="error" onClick={() => excluir(tecnico)}>
                            Excluir
                        </Button>
                    </TableCell>
                </TableRow>)}
            </TableBody>
        </Table>
    </TableContainer>
)

}

export default AdministracaoTecnico****

Quando rodo essa aplicacao recebo o erro:**** Uncaught TypeError: tecnicos.map is not a function"

No log do intelij e na inspeção do Chrome verifico que ele consumiu os dados a api:

{"content":[{"id":4,"nome":"Farinha Costa Carvalho","email":"farinha@partn.com.br","telefone":"1198977555","setor":"TECNICA"},{"id":1,"nome":"Tiago Cássio Carvalho da Rocha","email":"tiago@partn.com.br","telefone":"","setor":"GERENCIA"},{"id":2,"nome":"Vandelcleio Viega","email":"vandel@partn.com.br","telefone":"","setor":"TECNICA"}],"pageable":{"sort":{"empty":false,"sorted":true,"unsorted":false},"offset":0,"pageNumber":0,"pageSize":10,"paged":true,"unpaged":false},"last":true,"totalPages":1,"totalElements":3,"size":10,"number":0,"sort":{"empty":false,"sorted":true,"unsorted":false},"first":true,"numberOfElements":3,"empty":false}

Pelo que entendi, esse erro acontece porque estou chamando um .map de um objeto que não é uma array.

Como eu resolvo esse problema? Alguém pode me ajudar?

2 respostas

Bom dia, Tiago! o problema pode estar ocorrendo por causa que a função map ela espera um retorno, diferente de outras funções como o forEach(). Quando eu uso .map() nos meus códigos eu sempre uso o return. Então no seu código eu só colocaria o return dessa forma. Espero ter ajudado!

<TableBody>
                {tecnicos.map(tecnico => {
                    return (
                        <TableRow key={tecnico.id}>
                    <TableCell>
                        {tecnico.nome}
                    </TableCell>
                    <TableCell>
                        [ <RouterLink to={`tecnico/${tecnico.id}`}>editar</RouterLink> ]
                    </TableCell>
                    <TableCell>
                        <Button variant="outlined" color="error" onClick={() => excluir(tecnico)}>
                            Excluir
                        </Button>
                    </TableCell>
                </TableRow>
                    )
                }}
            </TableBody>

Oi Lucas,

Obrigado pela dica, eu fiz a modificação e mesmo assim ele continuar dando o erro de "tecnicos.map is not a function" , parece que o código não entende as informações lidas do json como um array. A unica diferenca do meu json para o da aula é que o meu tem um cabeçalho Content-Type e o da aula nao, mas eu ja configurei o headers como Content-Type e mesmo assim continua dando o erro.

:(