Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Erro ao inserir dado na tabela

Referente ao curso React parte 1: componentes reutilizáveis para sua webapp, no capítulo Cadastrando novos autores e atualização de componentes e atividade Reutilização de componentes e parametrização

por Emerson Carvalho Dias
| 111.1k xp | 50 posts

Estou usando o Axios (https://github.com/axios/axios) para fazer a requisição HTTP e o MyJSON para guardar/enviar meus dados (http://myjson.com/).

Tudo deu certo, mas quando cheguei na parte de inserir os dados na tabela ao clicar no botão, ele apresenta o seguinte erro:

TypeError: {(intermediate value)}.bind is not a function
    at App.js:35

Segue meu código

constructor(){
        super();
        this.state = {
            lista: [],
            name: '',
            email: '',
            password: ''
        }
        this.enviaForm = this.enviaForm.bind(this);
    }

    componentDidMount(){
        Axios.get('https://api.myjson.com/bins/13b4g2')
        .then((response) => {
            this.setState({ 
                lista: response.data
            })
        })
    }

    enviaForm(evento){
        evento.preventDefault();
        Axios.post('https://api.myjson.com/bins', {
            'name': this.state.name,
            'email': this.state.email,
            'password': this.state.password
        }).then((response) => {
            this.setState({
                lista: response.config.data
            }.bind(this))
        }).catch((response)=> {
            console.log(response)
        })
    }

    setName = (evento) => {
        this.setState({name: evento.target.value});
    }

    setEmail = (evento) => {
        this.setState({email: evento.target.value});
    }

    setPassword = (evento) => {
        this.setState({password: evento.target.value});
    }

render() {
        return (
    // Omitido
<div className="content" id="content">
    <div className="pure-form pure-form-aligned">
        <form className="pure-form pure-form-aligned" onSubmit={this.enviaForm.bind()}>
            <div className="pure-control-group">
                <label htmlFor="nome">Nome</label> 
                <input id="nome" type="text" name="nome" value={this.state.name}  onChange={this.setName}/>                  
            </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.password} onChange={this.setPassword}/>
            </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((autor, index) =>  
                <tr key={index}>
                    <td>{autor.name}</td>                
                    <td>{autor.email}</td>
                </tr>
            )}
        </tbody>
        </table> 
    </div>             
</div>            
)}

Se eu retiro o bind do setState no Post, ele dá esse erro: 

Uncaught TypeError: this.state.lista.map is not a function
1 resposta
solução!
por Emerson Carvalho Dias
| 111.1k xp | 50 posts

Caros, consegui resolver o problema. Não usei mais o MyJSON pois toda a vez que você envia um post, ele gera uma URL nova. Tentei pegar essa url gerada e consumir os dados salvos mas não consegui.

Continuei usando o AXIOS enviando os dadas para o HEROKU e o código ficou assim

import React, { Component } from 'react';
import './css/pure-min.css';
import './css/side-menu.css';
import Axios from 'axios';
import InputCustomizavel from './components/InputCustomizavel';
import BotaoSubmitCustomizado from './components/BotaoSubmitCustomizado';

class App extends Component {

    constructor(){
        super();
        this.state = {
            lista: [],
            nome: '',
            email: '',
            senha: ''
        }
    }

    componentDidMount(){
        Axios.get('https://cdc-react.herokuapp.com/api/autores')
        .then(response => {
            this.setState({ 
                lista: response.data
            })
        })
    }

    enviaForm = evento => {
        evento.preventDefault();
        Axios.post('https://cdc-react.herokuapp.com/api/autores', {
            nome: this.state.nome,
            email: this.state.email,
            senha: this.state.senha,
        })
        .then(response => {
            console.log('dados enviados')
            this.setState({
                lista: response.data
            })
            console.log(response)
        })
        .catch(response => {
            console.log(response)
        })
    }

    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="">My Library</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">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()} method='post'>
                                <InputCustomizavel id="nome" type="text" nome="nome" value={this.state.nome} onChange={this.setNome} label="Nome"/>
                                <InputCustomizavel id="email" type="text" nome="email" value={this.state.email} onChange={this.setEmail} label="E-mail"/>
                                <InputCustomizavel id="senha" type="password" nome="senha" value={this.state.senha} onChange={this.setSenha} label="Senha"/>
                                <BotaoSubmitCustomizado label="Gravar"/>
                            </form>             
                        </div>  
                        <div>            
                            <table className="pure-table">
                            <thead>
                                <tr>
                                    <th>Nome</th>
                                    <th>email</th>
                                </tr>
                            </thead>
                            <tbody>
                                {this.state.lista.map((autor) =>  
                                    <tr key={autor.id}>
                                        <td>{autor.nome}</td>                
                                        <td>{autor.email}</td>
                                    </tr>
                                )}
                            </tbody>
                            </table> 
                        </div>             
                    </div>            
                </div>
            </div>
        );
    }
}

export default App;

Se alguém tiver uma alternativa, adoraria ver. Senão, vou marcar como solução. Obrigado