-1

Sou novo na área e saber como posso fazer para ter um consumo dinâmico de api rest em react. Atualmente a minha consulta está fixa e minha ideia seria pegar o valor que o usuario digitar para consulta, como posso passar essa informação via parametro?

import axios from 'axios';

const api = axios.create({
    baseURL: 'https://localhost:44340/api'
});

export default api;

Meu componente

import React, { Component } from 'react';
import api from '../../../SolicitacaoApi';
import './style.css'

class SolicitacaoTable extends Component {
  state = {
    solicitacao: [],
  }
  async componentDidMount() {
    const response = await api.get('solicitacao?protocolo='+1000250170);        
    this.setState({ solicitacao: response.data });    
  }
  render() {
    const { solicitacao } = this.state;         
    return (            
      <div>
        <div className="main-table">                
            <table className="table-wrapper">
            <thead>
                <tr>
                    <th>Protocolo</th>
                    <th>Titular</th>
                    <th>Email</th>
                    <th>Data de inclusão</th>
                    <th>Telefone</th>
                    <th>Tipo de produto</th>
                    <th>Tipo de emissão</th>
                    <th className="column-status">Status</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>{solicitacao.protocolo}</td>
                    <td>{solicitacao.titularNome}</td>                                         
                    <td>{solicitacao.email}</td>      
                    <td>{solicitacao.dtInclusao}</td>                       
                    <td>{solicitacao.telefone}</td>
                    <td>{solicitacao.tipoProduto}</td>
                    <td>{solicitacao.tipoEmissao}</td>              
                    <td>
                        <div className={'status status-'+solicitacao.idStatusSolicitacao}>
                            {solicitacao.statusSolicitacao}
                        </div>
                </td>
            </tr>            
          </tbody>
        </table>
        </div>          
      </div>
    );
  };
};
export default SolicitacaoTable;
1
  • A pergunta não está clara, de onde vem o valor? Qual o problema exatamente? Você pode usar o componentDidUpdate para observar mudanças no estado ou nas props e realizar a requisição quando desejar, já que o componentDidMount só será executado uma vez 18/11/2020 às 17:33

2 Respostas 2

0

Você pode criar um useEffect para a variável que deseja. Ou seja, no momento em que determinada váriavel tiver seu valor alterado, ele dispara uma determinada action. Olha o seguinte exemplo.

const [value, setValue] = React.useState('');

const handleChange = (event) => {
    setValue(event.target.value);
  };

React.useEffect(() => {
    async function loadClients() {
      setLoading(true);
      const response = await api.get('agendamentos', {
      headers: {
        value
      }
    });
  
      const temp = response.data.map((client) => {
        return {
          label: client.descricao,
          options: client.lojas
        }        
      })
  
      setContent(temp);
      setLoading(false);
    }

    if(value !== ''){
      loadClients();
    };
  }, [value])


<RadioGroup row aria-label="gender" name="gender1" value={value} onChange={handleChange}>
          <FormControlLabel value="trocas" control={<Radio color="default" />} label="Trocas" />
          <FormControlLabel value="estoques" control={<Radio color="default" />} label="Estoques" />
</RadioGroup>

Eu uso o useState para criar as variáveis mas utilizo o useEffect para monitora-lá e chamar a API para carregar as novas informações.

1
  • Levando em consideração que o componente dele é um componente Classe, ele não pode usar useEffect. Sua resposta teria mais valor apresentando uma abordagem possível para o caso de componentes Classe também. 18/11/2020 às 17:32
0

Você pode adicionar um estado para armazenas seu campo de busca:

  state = {
    protocolo: '',
  }

Usando axios você pode passar os parâmetros desta forma:

const response = await api.get('solicitacao', { 
  params: { protocolo: this.state.protocolo }
}); 
// Saída: http://suaurl.com/solicitacao?protocolo=valor

Agora você pode criar um input de texto que atualiza o state.protocolo e criar um botão que chama sua função que faz a busca

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 .