0

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:

Não aparece as outras linhas da tabela, apenas a primeira #1 inserir a descrição da imagem aqui

Quando acrescento a linha

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

após

const terminals = response.data.data.data;

O resultado aparece normalmente na tela:

inserir a descrição da imagem aqui

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?

13
  • 1
    Tem várias coisas estranhas no seu código, entre elas, um switch case no construtor que realiza requests com o axios, essa estratégia é bem estranha, e também os getters/setters anêmicos que estão só poluindo seu código. Além disso, acredito que você não esteja acostumado com Promise no JS/TS (async/await), sugiro ler com atenção sobre isso. Outra coisa, o axios geralmente retorna um objeto com a propriedade "data" com o conteúdo da response do seu request, não vi você tratando isso. Commented 6/09/2021 às 16:23
  • 1
    Percebi mais uma coisa, você está usando React com classes e não com function components, não é que esteja errado mas não é a maneira com a qual normalmente se trabalhar em novos projetos React/React Native. Outra coisa, você está fazendo uma requisição para API dentro da function render do component, isso pode gerar um gargalo enorme por conta das reenderizações que o React faz. Separe a renderização da request para a API. Commented 6/09/2021 às 16:28
  • Estou começando a usar React agora, por isso não tenho muita experiência.
    – pe.Math
    Commented 6/09/2021 às 16:41
  • Este código que fiz já estava pronto, foi apenas um modelo para usar como base no desenvolvimento da aplicação. Em relação com Promise no JS/TS, não tenho muita base no assunto, mas já tentei usar o (async/await) na função que havia declarado logo acima do render() e retornou o seguinte erro: 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.
    – pe.Math
    Commented 6/09/2021 às 16:47
  • E até cheguei a ver sobre React com function components, mas como a solução tem que ser criada com TypeScript + TSX, por isso optei por utilizar POO para desenvolver a estrutura da projeto, foi onde comecei a aprender TypeScript utilizando classes, namespaces e getters/setters.
    – pe.Math
    Commented 6/09/2021 às 16:52

2 Respostas 2

1

Faz um bom tempo que não uso React com Class Component, mas vou te ajudar a organizar melhor e provavelmente resolver esse problema que está tendo. (Não rodei esse código, acredito que precisa de ajustes).

// api.ts
import axios, { AxiosInstance } from "axios";

export default class API {
  private baseUrl: string;
  private axiosInstance: AxiosInstance;

  constructor(url: string) {
    this.baseUrl = url;
    this.createAxios(url, "{TOKEN}");
  }

  get url(): string {
    return this.baseUrl;
  }

  private createAxios(url: string, token: string = ""): void {
    this.axiosInstance = axios.create({
      baseURL: url,
      headers: {
        Authorization: "Bearer " + token,
        "Content-Type": "application/json",
      },
    });
  }

  async get<T = any>(url: string, params = {}): Promise<T> {
    return this.axiosInstance
      .get(url, params)
      .then((response) => response.data);
  }

  async post<T = any>(url: string, params = {}): Promise<T> {
    return this.axiosInstance
      .post(url, params)
      .then((response) => response.data);
  }

  async delete<T = any>(url: string, params = {}): Promise<T> {
    return this.axiosInstance
      .delete(url, params)
      .then((response) => response.data);
  }

  async put<T = any>(url: string, params = {}): Promise<T> {
    return this.axiosInstance
      .put(url, params)
      .then((response) => response.data);
  }
}

Veja que criei um tipo TerminalServerResponse para definir o retorno do servidor, mas você precisa sempre adequar a sua realidade. Vi no seu código um data.data.data, então precisa verificar a estrutura do seu retorno para o formato mais correto.

// terminal.tsx
import React from "react";
import { Table } from "react-bootstrap";
import { IndexLinkContainer } from "react-router-bootstrap";
import API from "./api";

type TerminalServerResponse = {
  id: number;
  endereco: {
    logradouro: string;
    cidade: string;
    estado: string;
  };
};

export default class Terminal extends React.Component {
  constructor(props: any) {
    super(props);
    this.state = {
      data: [],
      loading: true,
      content: null,
    };
  }

  createTerminalTableRow = (terminal: TerminalServerResponse): JSX.Element => {
    return (
      <IndexLinkContainer to={`/FourthComponent?terminal_id=${terminal.id}`}>
        <tr>
          <td>{terminal.endereco.logradouro}</td>
          <td>{terminal.endereco.cidade}</td>
          <td>{terminal.endereco.estado}</td>
          <td>
            <IndexLinkContainer to={`/ThirdComponent?terminal_id=${terminal.id}`}>
              <i className="bi bi-pencil-square" />
            </IndexLinkContainer>
          </td>
        </tr>
      </IndexLinkContainer>
    );
  };

  getFromServer = async () => {
    this.setState({ loading: true });

    const api = new API("https://api-homolog.ongocargas.com.br/v1/api");

    try {
      const dataResult = await api.get<TerminalServerResponse[]>(
        "/Terminal/get-terminal-listagem",
        { pageSize: 10, pageIndex: 0, pesquisa: "" }
      );
      const htmltable: JSX.Element[] = [];

      dataResult.forEach((terminal) => {
        htmltable.push(this.createTerminalTableRow(terminal));
      });

      this.setState({ data: dataResult, content: htmltable, loading: false });
    } catch (error) {
      this.setState({ loading: false });
      alert("Erro");
      console.error(error);
    }
  };

  componentDidMount() {
    this.getFromServer();
  }

  public render() {
    const { loading, content } = this.state;

    if (loading) {
      // retormar algum tipo de spinner ou coisa assim
    }

    return (
      <Table striped={true}>
        <thead>
          <tr>
            <th>Terminal</th>
            <th>Cidade</th>
            <th>Estado</th>
            <th />
          </tr>
        </thead>
        <tbody>{content}</tbody>
      </Table>
    );
  }
}
3
  • Na classe API no arquivo api.ts, os métodos com a visibilidade async estão retornando o seguinte erro:
    – pe.Math
    Commented 6/09/2021 às 20:14
  • async não é uma visibilidade, é a definição de uma função/método assíncrono. Mas de qualquer forma no seu comentário não tem os dados do erro, poderia descrever melhor? Commented 6/09/2021 às 23:06
  • Ops, desculpe, acabei apertando o enter sem querer. Mas de qualquer forma, consegui resolver o problema. Como Axios tem uma funcionalidade semelhante ao AJAX, acabei por optar em usar JavaScript puro para preencher a tabela de acordo com a DOM. Mas preciso treinar ainda em React com TypeScript como utilizo hooks e variáveis de estado para serem definidas em funções anônimas utilizando callbacks.
    – pe.Math
    Commented 8/09/2021 às 1:36
0

Acabei por encontrar uma solução que resolveu grande parte do meu problema. Após o then(), tive que usar outra função document.getElementById dentro da função anônima (response) => { ... } para retornar os dados da API diretamente na DOM, ou seja na estrutura da página HTML.

Pelo que estava vendo e estudando, o Axios e AJAX tem muitas semelhanças em comum, mas ambos trabalham de diversas maneiras em plataformas e linguagens diferentes. Por exemplo em TypeScript, a solução encontrada no código abaixo não foi bem a desejada, pois tentei de diversas maneiras criar uma forma de jogar todos os elementos na tabela utilizando tags JSX e HTML, mas pelos erros de código e renderização que a IDE estava retornando, optei por resolver este problema da forma mais simples. Após a declaração da variável api, escrevi:

FirstComponent.tsx #37

api.axiosReq.then((response) => {
    const terminals = response.data.data.data;
    const tablebody = document.getElementById("table_body"); // <tbody id="table_body"/>

    if (tablebody != null) { // #2 verificação da variável para evitar erros de conteúdo nulo da IDE
        const tbody = tablebody;

        for (const terminal of terminals) {
            let htmlrow = "<tr>"; // criando a variável para armazenar as informações de cada linha da tabela
                htmlrow += "<td>" + terminal.nome + "</td>";
                htmlrow += "<td>" + terminal.endereco.cidade + "</td>";
                htmlrow += "<td>" + terminal.endereco.nomeEstado + "</td>";
                htmlrow += "<td>editar</td>";
            htmlrow += "</tr>";
            tbody.innerHTML += htmlrow; // acrescenta a linha htmlrow no corpo da tabela
        }
    }
}).catch((err: any) => {
    tbody.innerHTML += "Erro: " + JSON.stringify(err);
});

Resultado:

inserir a descrição da imagem aqui

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .