2

Estou iniciando com React.js e estou com problemas para acessar dados aninhados em um JSON.

Estou usando o whatwg-fetch para fazer a requisição e está funcionando, porém não consigo acessar os dados aninhados do JSON, exemplo: data.title ele exibe na tela normalmente, porém data.container.title ele acusa o erro:

App.js:31 Uncaught TypeError: Cannot read property 'title' of undefined

Já procurei em outros lugares inclusive na versão inglês do stackoverflow, artigos em portugues e em inglês e não encontrei uma resposta, alguém pode me ajudar? segue o código e o json acessado.

App.js

import React from 'react';
import 'whatwg-fetch';

export default class App extends React.Component {

constructor (props) {
  super(props);
  this.state = { dados:[] };
}

loadContentFromServer() {
 const url = this.props.url;

 fetch(url)
   .then(response => response.json())
   .then(json => {
     console.log(json);
     this.setState({ dados: json });
   });
}

componentDidMount() {
  this.loadContentFromServer();
}

render(){
  const data = this.state.dados;
  return (
    <div className="box">
      <h1 className="title">
        {data.container.title}<br/>
      </h1>
    </div>
  );
 }
}

Passando a url do Json

index.js

ReactDOM.render(<App url="http://localhost:3232/json/content.json"/>, document.getElementById('app'));

content.json

{
  "title": "Titulo",
  "numbers": [0, 1, 2, 3],
  "container": {
    "title": "Titulo",
    "content": "conteúdo da página"
  }
}
1
  • O React já chama o render antes de você fazer a requisição no didMount e receber o resultado. Antes da requisição ocorrer, não existe data.container.title, então acho que seja este o problema. Sendo assim, tente iniciar data.container.title com alguma outra informação antes
    – Dherik
    Commented 16/01/2017 às 16:07

1 Resposta 1

0

Tens de ter em conta que ambos o fetch() e o this.setState({ dados: json }); são assíncronos. Isso quer dizer que a primeira vez que o React tentar renderizar esse componente o valor de this.state.dados ainda vai ser uma array vazia como setado no construtor da classe do componente.

Então tens de criar uma verificação para o render não acontecer, ou seja renderizar null.

Algo assim:

render(){
  const data = this.state.dados;
  if (!data.container) return null;
  return (
    <div className="box">
      <h1 className="title">
        {data.container.title}<br/>
      </h1>
    </div>
  );
 }

Nota:

No construtor inicias o state assim: this.state = { dados:[] }; mas não me parece que é isso que o teu JSON retorna..., o teu JSON parece ser um objeto. Nesse caso seria mais correto setar o state assim: this.state = { dados:{} };.

Se o JSON for uma array, então o construtor está semanticamente correto mas o código no render não está. Aí precisas de aceder ao índice da array que pretendes. Algo assim:

{data[0].container.title}<br/>
4
  • Muito obrigado @Sergio, funcionou perfeitamente, porém ainda não entendi porque ele consegue acessar o primeiro nível do JSON como se tivesse carregado os dados parcialmente, e realmente o this.state = { dados:[] } estava errado, eu corrigi para this.state = { dados: {} } Commented 17/01/2017 às 4:37
  • @LeandroM.Silva ótimo ter funcionado! Podes explicar melhor "consegue acessar o primeiro nível do JSON"? onde achas que isso acontece?
    – Sergio
    Commented 17/01/2017 às 5:56
  • desculpe a demora para responder, então eu percebi que quando eu acessava dados.title na minha aplicação ele retornava o valor correto, porém, quando eu tentava acessar dados.container.title ou dados.container.content o console acusa error de undefined! tentei replicar o erro pelo jsFiddle pra ficar mais claro mas não consegui! Commented 20/01/2017 às 0:49
  • @LeandroM.Silva Podes colocar aqui o que aparece na consola com .then(response => console.log(typeof response, response))?
    – Sergio
    Commented 20/01/2017 às 6:40

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .