React的Json API访问错误

Question

I'm trying to access the following variable in Json from an API:

page[0].infoBloco[0].tabela[0].dados[0].fonte.nome

I'm getting the error:

TypeError: this.state.page[0] is undefined[Learn More] index.jsx:49

Json that the API returns is this:

[
    {
        "infoBloco": [
            {
                "tabela": [
                    {
                        "dados": [
                            {
                                "fonte": {
                                    "url": "http://www.google.com",
                                    "nome": "Site de buscas"
                                }
                            }
                        ]
                    }
                ]
            }
        ]
    },
    {
        "infoBloco": [
            {
                "tabela": [
                    {
                        "dados": [
                            {
                                "fonte": {
                                    "url": "http://www.yahoo.com",
                                    "nome": "Outro site de buscas"
                                }
                            }
                        ]
                    }
                ]
            }
        ]
    }
]

The React page code is this:

import React, { Component } from "react"

export default class extends Component {

  constructor(props) {
    super(props)
    this.state = { 
      page: [],
    }
  }

  componentDidMount() {
    this.getData()
  }

  getData = async () => {
    await fetch('http://localhost:3003/api')
      .then(resp => resp.json())
      .then(data => this.setState({ 
        ...this.state, 
        page: data,
      }))
  }

  render() {

    console.log(this.state.page[0].infoBloco[0].tabela[0].dados[0].fonte.nome)

    return (
      <div>
        Exemplo
      </div>
    )
  }
}

console.log(this.state.page) returns the full json

console.log(this.state.page[0]) returns the first json object

console.log(this.state.page[0].infoBloco) returns error TypeError: this.state.page[0] is undefined[Learn More] index.jsx:49

I can only access up page [0], when I try to access any more inner element it returns that same error. Could this error be caused by asynchronous access to the API? Can anyone help me fix this?

Answer 1

Your component is rendered twice:

1. First render, with state.page = [] , as specified in the constructor
2. After mounting, the page data is loaded and the state is updated ( componentDidMount method)
3. After the state has been updated, the component is rendered again , this time with the page data in the state

You get the error because when the component is rendered the first time, there is no state.page[0] yet, because the data has not been loaded yet.

You can fix your code by adding an if statement to guard against this:

import React, { Component } from "react"

export default class extends Component {

    constructor(props) {
        super(props)
        this.state = {
            page: [],
        }
    }

    componentDidMount() {
        this.getData()
    }

    getData = async () => {
        await fetch('http://localhost:3003/api')
            .then(resp => resp.json())
            .then(data => this.setState({
                ...this.state,
                page: data,
            }))
    }

    render() {

        if (this.state.page[0]) {
            console.log(this.state.page[0].infoBloco[0].tabela[0].dados[0].fonte.nome)
        }

        return (
            <div>
                Exemplo
            </div>
        )
    }
}

It's common practice to render something like a “loading…” message or a spinner when the component is rendered the first time, without data, like this:

render() {

    if (!this.state.page[0]) {
        return <div>Loading, please wait…</div>
    }

    return (
        <div>
            Exemplo: {this.state.page[0].infoBloco[0].tabela[0].dados[0].fonte.nome}
        </div>
    )
}

Answer 2

do a conditional access as the render gets called before api response which is causing undefined error

if(this.state.page[0])
console.log(this.state.page[0].infoBloco[0].tabela[0].dados[0].fonte.nome)

Answer 3

This is definitely due to asynchronous nature of the API call. You should not render your component until API response is updated in the state.

Try this in your render method,

render() {

    if (!(this.state.page && this.state.page.length && this.state.page[0].infoBloco))
      return null;

    return (
      <div>
        Exemplo
      </div>
    )
}

Answer 4

you using try JSON.stringify in react-native

  getData = async () => { await fetch('http://localhost:3003/api') .then(resp => resp.json()) .then(data => this.setState({ ...this.state, page: JSON.stringify(data), })) }