Após preencher os dados no formulário e clicar em "Gravar" o navegador retorna o erro "Cannot POST /". No console aparece "The development server has disconnected. Refresh the page if necessary." e "Content Security Policy: The page’s settings blocked the loading of a resource at http://localhost:3000/favicon.ico (“default-src”).".
Não sei se isso tem a ver, mas o array do servidor local (http://localhost:8080/api/autores/) retorna vazio: "[]".
Arquivo "App.js":
import React, { Component } from 'react';
import './css/side-menu.css';
import './css/pure-min.css';
import $ from 'jquery';
class App extends Component {
constructor(){
super();
this.state = {lista : [],nome:'',email:'',senha:''};
this.enviaForm = this.enviaForm.bind(this);
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',
success:function(resposta){
this.setState({lista:resposta});
}.bind(this)
}
);
}
enviaForm(evento){
evento.preventDefault();
$.ajax({
url:"http://localhost:8080/api/autores",
contentType: 'application/json',
dataType: 'json',
type: 'post',
data: JSON.stringify({nome:'',email:'',senha:''}),
success: function(resposta){
this.setState({lista:resposta});
}.bind(this),
erro: function(resposta){
console.log("erro");
}
});
}
setNome(evento){
this.setState({nome:evento.target.value});
}
setEmail(evento){
this.setState({email:evento.target.value});
}
setSenha(evento){
this.setState({senha:evento.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" href="#">Company</a>
<ul className="pure-menu-list">
<li className="pure-menu-item"><a href="#" className="pure-menu-link">Home</a></li>
<li className="pure-menu-item"><a href="#" className="pure-menu-link">Autor</a></li>
<li className="pure-menu-item"><a href="#" className="pure-menu-link">Livro</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">
<div className="pure-control-group">
<label htmlFor="nome">Nome</label>
<input id="nome" type="text" name="nome" value={this.state.name} onChange={this.setNome} />
</div>
<div className="pure-control-group">
<label htmlFor="email">Email</label>
<input id="email" type="email" name="email" value={this.state.email} onChange={this.setEmail} />
</div>
<div className="pure-control-group">
<label htmlFor="senha">Senha</label>
<input id="senha" type="password" name="senha" value={this.state.senha} onChange={this.setSenha} />
</div>
<div className="pure-control-group">
<label></label>
<button type="submit" className="pure-button pure-button-primary">Gravar</button>
</div>
</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;