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?
Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead. TypeScript
. Por isso deixei o código desse jeito.