[React] Como listar resultados da requisição feita em uma API REST utlizando React com Axios?

Boa tarde, estou aprendendo a desenvolver em React e TypeScript, mas encontro dificuldades para implementar uma solução que envia uma requisição GET para a API REST e retorna dados para o projeto de um gerenciador de terminais no qual estou trabalhando.

Problema: No projeto em React, estou usando Axios para enviar requisições GET para a API REST e estou tendo dificuldades para encontrar uma solução para retornar os dados em TypeScript e JSX, linguagens e tecnologias onde não tenho muita experiência. Os códigos que já fiz e a solução que tentei encontrar podem ser observados logo abaixo.

FirstComponent.tsx


import * as React from "react";
import { DropdownButton, FormControl, FormGroup, InputGroup, MenuItem, Table } from 'react-bootstrap';
import { Button, ButtonGroup, ButtonToolbar } from 'react-bootstrap';
import { IndexLinkContainer } from "react-router-bootstrap";
import "../App.css";
import API from "./FifthComponent";

export default class Terminal extends React.Component<{}> {
public render() {
// fazendo uma requisição GET na API com a URL e os dados a serem enviados

const api = new API("https://api-homolog.ongocargas.com.br/v1/api/Terminal/get-terminal-listagem", "get", {pageSize: 10, pageIndex: 0, pesquisa: ""});

// criando um array onde será guardado as linhas (registros) da tabela

const htmltable: JSX.Element[] = [];

// #1 exemplo para ver se a tabela será carregada

htmltable.push(<i>foi apenas este</i>);

// chamando um callback para retornar o resultado da requisição

api.axiosReq.then((response) => {
// criando uma variável para armazenar os dados dos terminais da API

const terminals = response.data.data.data;

// iterando os terminais e adicionando um por um no array dos registros

for (let i = 0; i < terminals.length; i++) {
htmltable.push(
<IndexLinkContainer to="/FourthComponent?terminal_id={terminals.id}">
<tr>
<td>{terminals.endereco.logradouro}</td>
<td>{terminals.endereco.cidade}</td>
<td>{terminals.endereco.estado}</td>
<td><IndexLinkContainer to="/ThirdComponent?terminal_id={terminals.id}"><i className="bi bi-pencil-square" /></IndexLinkContainer></td>
</tr>
</IndexLinkContainer>
);
}
}).catch((err: any) => {
// se houver erro de conexão, a tabela terá uma única linha com as informações da falha

htmltable.push(<i>{JSON.stringify(err)}</i>);
});

// retornando a tabela na view com as linhas armazenadas no array 'htmltable'

return (
<><Table striped={true}>
<thead>
<tr>
<th>Terminal</th>
<th>Cidade</th>
<th>Estado</th>
<th/>
</tr>
</thead>
<tbody>
{htmltable}
</tbody>
</Table>
);
}
}

FifthComponent.tsx


import axios, { AxiosInstance, AxiosPromise } from 'axios';
import '../App.css';

export default class API {
private url: string;
private typed: string;
private data: object;
private token: string;
private headers = {};
private axiosObj: AxiosInstance;
private axiosRequest: AxiosPromise;
private responseData: object;

constructor (url: string, type: string, data?: object) {
this.url = url;
this.typed = type;
this.token = "{TOKEN}";
this.headers = {
"Authorization": "Bearer " + this.token,
"Content-Type": "application/json"
};

if (data != null) {
this.data = data;
}

this.axiosObj = axios.create({ headers: this.headers });

switch (this.typed) {
case "get":
if (this.data != null) {
this.axiosRequest = this.axiosObj.get(this.url, {data: this.data});
} else {
this.axiosRequest = this.axiosObj.get(this.url);
}
break;
case "post":
if (this.data != null) {
this.axiosRequest = this.axiosObj.post(this.url, {data: this.data});
} else {
this.axiosRequest = this.axiosObj.post(this.url);
}
break;
case "delete":
if (this.data != null) {
this.axiosRequest = this.axiosObj.put(this.url, {data: this.data});
} else {
this.axiosRequest = this.axiosObj.put(this.url);
}
break;
case "put":
if (this.data != null) {
this.axiosRequest = this.axiosObj.delete(this.url, {data: this.data});
} else {
this.axiosRequest = this.axiosObj.delete(this.url);
}
break;
default:

break;
}
}

get Url() {
return this.url;
}

set Url(url: string) {
this.url = url;
}

get tokenStr() {
return this.token;
}

set tokenStr(token: string) {
this.token = token;
}

set type(type: string) {
this.typed = type;
}

get type() {
return this.typed;
}

set dataSend(data: object) {
this.data = data;
}

get dataSend() {
return this.data;
}

set axiosOb(axiosOb: AxiosInstance) {
this.axiosObj = axiosOb;
}

get axiosOb() {
return this.axiosObj;
}

set axiosReq(axiosReq: AxiosPromise) {
this.axiosRequest = axiosReq;
}

get axiosReq() {
return this.axiosRequest;
}

set response(response: object) {
this.responseData = response;
}

get response() {
return this.responseData;
}

set headersData(headers) {
this.headers = headers;
}

get headersData() {
return this.headers;
}
}

Resultado:



Quando acrescento a linha

document.body.innerHTML = JSON.stringify(terminals);

após

const terminals = response.data.data.data;

O resultado aparece normalmente na tela:

Problema: Não consigo retornar todos os dados da API para listar os terminais na tabela. Tenho uma hipótese de que a função api.axiosReq.then() está sendo ignorada por algum motivo ou erro que fiz e não foi identificado na IDE. Desde então, quando vou executar o projeto no servidor aparece apenas a primeira linha #1 e não as restantes. Qual a possível solução para este problema?
​

Continue reading...