Bom dia, No exercício real estou fazendo uma requisição Axios e colocando o resultado no state que seria um objeto {flcaixa} com outros objetos dentro exemplo {pessoa}. Porem quando acesso:
<label>{this.state.listflcaixa.pessoa.fantasia}</label>
Ele me retorna o erro:
TypeError: Cannot read property 'fantasia' of undefined
Para simular eu fiz um exemplo minimo para demostrar a duvida, segue o código:
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
constructor() {
super();
this.state = {
listflcaixa:{},
}
}
componentDidMount = () =>{
var exemplo = {
obs: "",
vljuros: "R$ 0,00",
dtlanc: "10/08/2018",
pessoa: {
indie: "1",
cnae: "",
fantasia: "MEU NOME",
im: "",
nome: "MEU NOME",
cnpj: "136711584000151",
id: 31,
empresa: {
telefone: "(69)6666-9999",
ativo: 2,
financeiro: 1,
nome: "Minha Empresa",
cnpj: "032658749944",
id: 15
},
}
}
this.setState({listflcaixa: exemplo});
}
list = () => {
console.log(this.state.listflcaixa);
}
render() {
return (
<div className="App">
<div className="row">
<div className="col-lg-6">
<label>Documento:</label>
</div>
<div className="col-lg-6">
<label>{this.state.listflcaixa.vljuros}</label>
</div>
</div>
<div className="row">
<div className="col-lg-6">
<label>Fantasia:</label>
</div>
<div className="col-lg-6">
<label>{this.state.listflcaixa.pessoa.fantasia}</label>
</div>
</div>
<button onClick={this.list}>Teste</button>
</div>
);
}
}
export default App;
Coloquei no
componentDidMount
Para simular a requisição Axios, se eu tentar rodar o projeto como esta, ele me retorna o mesmo erro:
TypeError: Cannot read property 'fantasia' of undefined
Porem se retirar o
<label>{this.state.listflcaixa.pessoa.fantasia}</label>
Ele consegue acessar as informações do
<label>{this.state.listflcaixa.vljuros}</label>
Sem nenhum problema.
Minha duvida é, como ele não consegue acessar listflcaixa.pessoa.fantasia, mas consegue listflcaixa.vljuros ?
Se alguém preferir pode pegar o exemplo no git, para simular. https://github.com/Denis-String/Exemplo