Professor pode me dar uma luz !! Estou aprendendo react na faculdade, porém é com a biblioteca axios js então resolvi acompanhar com o axios este curso em vez do JQUERY ( Ajax ) na hora de colocar o PubSub não estou conseguindo, está dando lista indefinida mais não estou entendendo o pq !!! Se tiver como me dar uma luz serei eternamente grato !!
import React, { Component } from 'react';
import FormularioAutor from './FormularioAutor';
import TabelaAutor from './TabelaAutor';
export default class AutorBox extends Component{
render(){
return(
<div>
<div className="header">
<h1>Cadastro de Autores</h1>
</div>
<div className="content" id="content">
<FormularioAutor />
<TabelaAutor />
</div>
</div>
)
}
}
////////
import React, { Component } from 'react';
import axios from 'axios';
import InputForm from './InputForm';
import InputBotao from './InputBotao';
import PubSub from 'pubsub-js';
export default class FormularioAutor extends Component{
constructor(){
super();
this.state ={nome:"",email:"",senha:""}
this.cadastrar = this.cadastrar.bind(this);
}
cadastrar(e){
e.preventDefault();
axios.post("http://localhost:3000/autores",{nome:this.state.nome,email:this.state.email,senha:this.state.senha})
.then((novaLista)=>{
PubSub.publish("nova-lista",novaLista.data)
})
.catch((e) => { console.log('Erro ao recuperar os dados'+e)});
}
render(){
return(
<div className="pure-form pure-form-aligned">
<form className="pure-form pure-form-aligned" method="post" onSubmit={this.cadastrar}>
<InputForm htmlFor="nome" label="Nome" id="nome" tipo="text" name="nome" value={this.state.nome} onChange={(e)=>{
this.setState({nome:e.target.value} )}}/>
<InputForm htmlFor="email" label="Email" id="email" tipo="email" name="email" value={this.state.email} onChange={(e)=>{
this.setState({email:e.target.value} )}}/>
<InputForm htmlFor="senha" label="Senha" id="senha" tipo="password" name="senha" value={this.state.senha} onChange={(e)=>{
this.setState({senha:e.target.value} )}}/>
<InputBotao tipo="submit" nome="Gravar"/>
</form>
</div>
)
}
}
/////////
import React, { Component } from 'react';
import axios from 'axios';
import PubSub from 'pubsub-js';
export default class TabelaAutor extends Component{
constructor(){
super();
this.state ={lista:[]}
}
componentDidMount() {
axios.get("http://localhost:3000/autores")
.then(response => { this.setState({lista: response.data})})
.catch((e) => { console.log('Erro ao recuperar os dados'+e)})
PubSub.subscribe("nova-lista",(topico,novaLista)=>{
this.setState({lista:novaLista});
});
}
render(){
return(
<div>
<table className="pure-table">
<thead>
<tr>
<th>Autor</th>
<th>Email</th>
<th>Senha</th>
</tr>
</thead>
<tbody>
{
this.state.lista.map((data)=>{
return(
<tr key={data.id}>
<td>{data.nome}</td>
<td>{data.email}</td>
<td>{data.senha}</td>
</tr>
)})
}
</tbody>
</table>
</div>
);
}
}
Erro ///// Uncaught TypeError: this.state.lista.map is not a function at TabelaAutor.render (TabelaAutor.js:29) at finishClassComponent (react-dom.development.js:14979) at updateClassComponent (react-dom.development.js:14934) at beginWork (react-dom.development.js:15840) at performUnitOfWork (react-dom.development.js:19745) at workLoop (react-dom.development.js:19786) at HTMLUnknownElement.callCallback (react-dom.development.js:147) ......