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