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

Acessar um objeto React

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

2 respostas
solução!

Oi Denis, tudo bom?

Tenta incializar a estrutura do json listflcaixa completa. Algo como:

constructor() {
    super();
    this.state = {
      listflcaixa:{
      obs: "",
      vljuros: "",
      dtlanc: "",
      pessoa: {
        indie: "",
        cnae: "",
        fantasia: "",
        im: "",
        nome: "",
        cnpj: ",
        id: null,
        empresa: {
        telefone: ",
          ativo: null,
          financeiro: null,
          nome: "",
          cnpj: "",
          id: null
        },
      }
    },
    }
  }

Quando o JSON tem uma estrutura mais complexa, com outros JSONs dentro, o ideal é inicializar a estrutura toda para que o react consiga injetar sem. Por isso ele conseguiu acessar seu primeiro atributo, porque ele ainda estava no primeiro nivel, que é mais simples =)

Qualquer problema é só falar

Abraço

SIm, se eu colocar direto no State funciona. O problema é que como mencionei, se eu receber esses dados de um JSON e colocar ele no state, e logo em seguida tem uma label que usaria essa informação, o primeiro nivel ele consegue buscar. Exemplo: listflcaixa.valor Da certo...

Mas o segundo objeto não, ele me retorna que não esta definido.

Exemplo: listflcaixa.pessoa.nome

Mas se colocar direto no state ele consegue colocar na Label, os dois valores, listflcaixa.valor e listflcaixa.pessoa.nome por exemplo

O problema esta quado é passado um novo valor ao state, e tentar imprimir na tela.

EDIT 1: Consegui, não tinha entendido sua resposta de imediato. Deixei o Objeto inicializado com valores null no state e deu certo, Obrigado.