1
resposta

Erro Aula 5: TypeError: _this5.props.callbackAtualizaListagem is not a function

Ao estruturar o novo código seguindo a aula, está dando seguinte erro no console:

Autor.js:123 Uncaught (in promise) TypeError: _this5.props.callbackAtualizaListagem is not a function at Autor.js:123

Segue meu código da classe Autor.js

import React, { Component } from 'react';
import SimpleInput from './components/SimpleInput';
import SubmitButton from './components/SubmitButton';


class AutorForm extends Component {

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

  sendForm(event) {

    event.preventDefault();
    fetch('http://cdc-react.herokuapp.com/api/autores', {
    method: 'post',
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      },
    body: JSON.stringify({
      nome: this.state.nome,
      email: this.state.email,
      senha: this.state.senha,
      })
    })
    .then((response) => {
      return response.json() })
    .then((json) => {
      this.setState({lista: json});
    }) 
    .catch(error => {
      console.log('Request failed', error);
    });
  }

  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 className="pure-form pure-form-aligned">
         <form className="pure-form pure-form-aligned" onSubmit={this.sendForm} method='post'>
           <SimpleInput id="nome" type="text" name="nome" value={this.state.nome} onChange={this.setNome} label="Nome" />
           <SimpleInput id="email" type="text" name="email" value={this.state.email} onChange={this.setEmail} label="Email" />
           <SimpleInput id="senha" type="password" name="senha" value={this.state.senha} onChange={this.setSenha} label="Senha" />
              <div className="pure-control-group">                                  
                <label></label> 
                <SubmitButton label="Gravar"/>                                  
              </div>
           </form>         
        </div>  

    );
  }

}

class AutorTable extends Component {

  render() {
    return (
           <div>            
                <table className="pure-table">
                  <thead>
                    <tr>
                      <th>Nome</th>
                      <th>email</th>
                    </tr>
                  </thead>
                  <tbody>
                    {
                      this.props.lista.map(function(autor){
                        return (
                          <tr key={autor.id}>
                            <td> {autor.nome} </td>
                            <td> {autor.email} </td>
                          </tr>
                        );
                      })
                    }
                  </tbody>
                </table> 
              </div> 
    );
  }

}

export default class AutorBox extends Component {

  constructor() {
    super();
    this.state =  {lista : []};
    this.atualizaListagem = this.atualizaListagem.bind(this);
  }


  componentDidMount() {

    const url = 'http://cdc-react.herokuapp.com/api/autores';

    fetch(url, {  
      method: 'GET'
    }).then((response) => {
        return response.json() })   
      .then((json) => {
        this.props.callbackAtualizaListagem(json);
    });
  }

  atualizaListagem(novaLista) {
    this.setState({lista:novaLista});
  }

  render() {
    return (
      <div>
        <AutorForm callbackAtualizaListagem={this.atualizaListagem} />
        <AutorTable lista={this.state.lista} />
      </div>
    )
  }
}
1 resposta

Opa, onde ta a parte do código que usa o AutorBox? Está passando a função como argumento?

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