0

sou novo em programação e estou tentando trazer dados de um banco de dados XAMPP em meu PC por uma API.

O problema é quando tento colocar os dados que estou puxando da API no setState(), simplesmente não entendo oque posso fazer para armazenar os dados dentro do constructor. Tentei como Array, separando as variáveis, não sei.

Esse é meu constructor:

constructor(props) {
      super(props);
      this.state = { 
        title: null,
        clientes : [{
          nome:'',
          cpf:''
        }]
      };
  
      this.reload = () => {
        window.location.reload();
      }
  };

Aqui é uma função assíncrona com fetch para dentro da minha API (os dados do meu DB no XAMPP mandam dados para está API).

  callBackSearchData = async() => {
    const response = await fetch("http://localhost:9000/clientes");
    const clientes = await response.json();
    if(response.status !== 200) {
      throw Error(clientes.menssage);
    }
    return clientes;
  }

Se eu der um console.log(clientes) dentro da função callBackSearchData esse é o retorno que tenho no console.

(3) [{…}, {…}, {…}]
0: {ID: 1, Nome: 'teste1', CPF: '12344567890'}
1: {ID: 2, Nome: 'teste2', CPF: '22344567890'}
2: {ID: 3, Nome: 'teste3', CPF: '32344567890'}
length: 3
[[Prototype]]
: 
Array(0)

e tenho componentWillDidMount para retornar a função async, aqui eu estou me perdendo, não sei como passar a informação da função callBackSearchData para dentro do state.clientes para eu exibir em reactJS.

Tentei de diversas maneiras, exemplo:

cliente: res.Nome (o retorno é undefined)

  componentWillMount() {

    this.callBackSearchData()
      .then( res => this.setState(({})))
      .catch( err => console.log(err));

//CALLBACK É UM TESTE
    this.callBackAPI()
      .then( res => this.setState({ title: res.title2 }))
      .catch( err => console.log(err));
  };

Esse é o reactJS para exibir ele. Talvez eu precise de map() para mostrar todas as informações que estão dentro do clientes?

render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
        </header>
        <button type='button' value={"botão de atualizar"} onClick={this.reload}> reload page</button>
        <p className='App-intro'>{this.state.title}</p>
        <p className='App-intro'>{???????}</p>
      </div>
    )

não tentei nada ainda

1 Resposta 1

0
this.callBackSearchData()
  .then( res => this.setState({
    clientes: res
  }))
  .catch( err => console.log(err));

Faltou vc atualizar o estado com os valores vindo da api, logo abaixo, sim vc precisar usar um map para renderizar os dados salvos no estado, como é um array vc usa o map, por exemplo:

render() {
const { title, clientes } = this.state;
return (
  <div className="App">
    <header className="App-header">
      <img src={logo} className="App-logo" alt="logo" />
      <p>
        Edit <code>src/App.js</code> and save to reload.
      </p>
    </header>
    <button type='button' value={"botão de atualizar"} onClick={this.reload}> reload page</button>
    <p className='App-intro'>{title}</p>
     {clientes.map((client) => (
     <p className='App-intro'>{client.Nome} - {client.CPF}</p>
   ))}
  </div>
)

Assim vc renderiza, eu coloquei os dados de nome e cpf juntos mas tem jeitos melhores de vc lidar com isso, mas fez sentido pra vc?

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 .