Ainda não tem acesso? Estude com a gente! Matricule-se
Ainda não tem acesso? Estude com a gente! Matricule-se

Solucionado (ver solução)

/localhost:8080/api/autores ERR_CONNECTION_REFUSED

Olá, pessoal, (utilizo windows 10)

1 - Não consigo atualizar o cadastro de autores, aparece este erro abaixo! "GET http://localhost:8080/api/autores net::ERR_CONNECTION_REFUSED"

2 - Quando acesso o "localhost:8080/api/autores", só aparece "[]" é normal ?pois já estou na aula,

Codigo atual: app.js

import React, { Component } from 'react'; import './css/pure-min.css'; import './css/side-menu.css'; import $ from 'jquery'; import InputCustomizado from './componentes/InputCustomizado'; import BotaoSubmitCustomizado from './componentes/BotaoSubmitCustomizado';

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:this.state.nome,email:this.state.email,senha:this.state.senha}), success: function(resposta){ this.setState({lista:resposta}); }.bind(this), error: 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 (

      <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} method="post">
                    <InputCustomizado id="nome" type="text" name="nome" value={this.state.nome} onChange={this.setNome} label="Nome"/>                                              
                    <InputCustomizado id="email" type="email" name="email" value={this.state.email} onChange={this.setEmail} label="Email"/>                                              
                    <InputCustomizado id="senha" type="password" name="senha" value={this.state.senha} onChange={this.setSenha} label="Senha"/>                                                                      
                    <div className="pure-control-group">                                  
                      <label></label> 
                      <BotaoSubmitCustomizado label="Gravar"/>                                
                    </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>
1 resposta
solução

Boa noite, Michel! Como vai?

O erro net::ERR_CONNECTION_REFUSED ocorre quando não se consegue acessar a URL requerida. Nesse caso eu imagino que sua API não estivesse funcionando no momento da requisição.

Contudo esse curso de React que vc está assistindo é o antigo. Recomendo fortemente que vc assista os novos cursos pois trazem o que há de mais novo no sertão do React! Seguem os links!

https://cursos.alura.com.br/course/react-componentes-reutilizaveis

https://cursos.alura.com.br/course/react-validacao-rotas-api

Grande abraço e bons estudos, meu aluno!