3

Na função 'componentDidMount' do REACT eu pego o json de um link em questão, porém no 'render' eu não consigo passar esses objetos pois o objeto está em um '.then' na primeira função. Como posso realizar isso?

  componentDidMount(){
    let URL = 'http://algumaUrl'
       fetch(URL)
       .then(function(response) {
          let data = response.json()
          return data;
       })
       .then((json) => {
          console.log(json)
          // this.setState({data : json});
          this.setState({data : json});
          grafico = json;
       })
       .catch(function(ex) {
          console.log('parsing failed', ex)
       })
  }

  render () {

    console.log('grafico ', grafico);
}

O meu grafico recebe o JSON que eu adquiri através do GET, porém para mostrar na tela ele vai aparecer nulo, pois o mesmo está no then.

1 Resposta 1

1

Isso acontece porque o json vai ser recebido assíncronamente.

O conceito a ter em conta em React é que tudo está a zeros no inicio. E depois vão chegando e mudando valores, tudo via props e state. Se por exemplo tens um objeto a vir desse ajax, tens de ter na função render uma solução para o código funcionar mesmo antes desse valor chegar. E tudo o que é inserido na página ou vem via props ou vis setState. Fazer grafico = json; para usar fora desse método è algo anti-pattern, do passado, não reactivo.

Então usa o setState e caso necessário retorna null até o objeto data existir:

  componentDidMount(){
    let URL = 'http://algumaUrl'
       fetch(URL)
       .then(function(response) {
          let data = response.json()
          return data;
       })
       .then((json) => {
          this.setState({data : json});
       })
       .catch(function(ex) {
          console.log('parsing failed', ex)
       })
  }

  render () {
    const data = this.state.data;
    if (Object.keys(this.data).length == 0) return null;
    else return (<p>{JSON.stringify(data)}</p>);
}
1

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 .