Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Ao subir aplicação, os dados não são renderizados

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;
3 respostas
solução!

Fala, mateus, tudo bom?

Pode colocar um console.log() no componentDidMount() e me passar o retorno? e no success do ajax? ele a lógica do código em si aparentemente está correta.

Beleza Mario!

Seguinte, coloquei um console.log() onde vc me pediu, e esse foi o retorno no console do chrome:

App.js:26 passou pelo componentDidMount
App.js:31 passou pelo success!

Mario, não sei pq, mas no meu notebook pessoal foi normal. Não fiz nada demais, só clonei do meu repositório pessoal e subi o server. No PC do trabalho não rolou. Deve ser problema de ambiente isso, sei lá. Obrigado pela atenção novamente. Abração!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software