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"
}
}
didMount
e receber o resultado. Antes da requisição ocorrer, não existedata.container.title
, então acho que seja este o problema. Sendo assim, tente iniciardata.container.title
com alguma outra informação antes