Boa tarde galera,
Estou tendo um pequeno probleminha ao subir a aplicação. Os dados da api não são renderizados de primeira, não sei o motivo, mas quando eu adiciono qualquer outra informação no formulário, ai sim todos os outros são renderizados.
Segue o código inteiro do meu App.js. Se precisar de mais código pra me ajudarem nisso, só me pedir. Obrigado!!
import React, {Component} from 'react';
import './css/pure-min.css';
import './css/side-menu.css';
import $ from 'jquery';
import InputCustom from './components/InputCustom.js'
import SubmitCustom from './components/SubmitCustom.js'
class App extends Component {
constructor() {
super();
this.state = {
lista: [],
nome: '',
email: '',
senha: ''
};
this.setNome = this.setNome.bind(this);
this.setEmail = this.setEmail.bind(this);
this.setSenha = this.setSenha.bind(this);
}
componentDidMount() {
$.ajax({
url: 'http://localhost:8080/api/autores',
dataType: 'json',
sucess: function (response) {
console.log('recebido!');
this.setState({lista: response});
}.bind(this)
});
}
enviaForm(event) {
event.preventDefault();
$.ajax({
url: 'http://localhost:8080/api/autores',
contentType: 'application/json',
dataType: 'json',
type: 'post',
data: JSON.stringify({
nome: this.state.nome,
email:this.state.email,
senha:this.state.senha
}),
success: function (response) {
this.setState({lista:response});
console.log("Dados enviados com sucesso!")
}.bind(this),
error: function (response) {
console.log("erro")
}
});
}
setNome(event){
this.setState({nome: event.target.value})
}
setEmail(event){
this.setState({email: event.target.value})
}
setSenha(event){
this.setState({senha: event.target.value})
}
render() {
return (
<div id="layout">
<a href="#menu" id="menuLink" className="menu-link">
<span></span>
</a>
<div id="menu">
<div className="pure-menu">
<a className="pure-menu-heading">Company</a>
<ul className="pure-menu-list">
<li className="pure-menu-item"><a className="pure-menu-link">Home</a></li>
<li className="pure-menu-item"><a className="pure-menu-link">Autores</a></li>
<li className="pure-menu-item"><a className="pure-menu-link">Livros</a></li>
</ul>
</div>
</div>
<div id="main">
<div className="header">
<h1>Cadastro de Autores</h1>
</div>
<div className="content" id="content">
<div className="pure-form pure-form-aligned">
<form className="pure-form pure-form-aligned" onSubmit={this.enviaForm.bind(this)} method="post">
<InputCustom id="nome" type="text" name="nome" value={this.state.nome} onChange={this.setNome} label="Nome" />
<InputCustom id="email" type="email" name="email" value={this.state.email} onChange={this.setEmail} label="Email"/>
<InputCustom id="senha" type="password" name="password" value={this.state.password} onChange={this.setSenha} label="Senha"/>
<SubmitCustom label="Gravar" />
</form>
</div>
<div>
<table className="pure-table">
<thead>
<tr>
<th>Nome</th>
<th>email</th>
</tr>
</thead>
<tbody>
{
this.state.lista.map(function (autor) {
return (
<tr key={autor.id}>
<td>{autor.nome}</td>
<td>{autor.email}</td>
</tr>
);
})
}
</tbody>
</table>
</div>
</div>
</div>
</div>
)
}
}
export default App;