1

Estou consumindo via axios o seguinte JSON: https://randomuser.me/api/?results=5

Quando tento acessar pessoa.name.title recebo o seguinte erro:

TypeError: Cannot read property 'title' of undefined

Só consigo acessar a propriedade title quando digito dessa forma {pessoa.name && pessoa.name.title,

Alguém sabe me explicar porquê?

import React, {Component} from 'react';
import {Card, Col, Button} from 'react-bootstrap';
import api from "../../services/api"

class CardPeople extends Component {
    constructor(props){  
        super(props)  
        this.state = { 
            pessoas: [
                {    
                }
            ]
        }
    }
    async componentDidMount(){
        const people_api = await api.get("https://randomuser.me/api/?results=5");           
        this.setState({
            pessoas: people_api.data.results
        })
    }
    render() {
        return (
            <>
             {this.state.pessoas.map((pessoa, index) =>
            <Col key={pessoa.gender}>                               
                <p> {pessoa.name && pessoa.name.title}</p><br></br>                 
            </Col>
            )}
            </>
        )
    }
} 
0

1 Resposta 1

2

Verificando seu código acabei descobrindo que foi iniciado o array de pessoas com um objeto vazio, observe:

this.state = { 
    pessoas: [
        { // <-- aqui o problema
        } // <-- aqui o problema
    ]
}

mas, no caso como não tem itens no array (os itens que vão ser carregados após o componente estar totalmente carregado), só precisa informar para o script que é um array sem item (com tamanho 0), exemplo:

this.state = { 
    pessoas: [] //correto
}

ou seja, como foi iniciado o array com um objeto sem chaves e valores, causa no inicio do carregamento desse componente a exceção como demonstrada na sua pergunta por falta de informação que somente está disponível a partir da requisição.


Eu acabei simulando um exemplo e no meu caso funcionou perfeitamente, exemplo:

class Source extends React.Component {
  constructor() {
    super();
    this.state = {
      results: []
    };
    this.getResults =
      this.getResults.bind(this);
  }
  
  componentDidMount(){
     this.getResults();
  }
  
  getResults() {
    fetch('https://randomuser.me/api/?results=5')
      .then(r => r.json())
      .then(r => {
        this.setState({results: r.results});
      });
  }
  
  render() {
    return (
      <div>
        <ul>
          {this.state.results.map((p,i) => <li key={i}>{p.name.title}</li>)}
        </ul>
      </div>
    );
  }
}
ReactDOM.render( <Source/> , document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root">Carregando ...</div>

O exemplo acima foi realmente para demonstrar o funcionamento, só difere que foi utilizado um API própria do para buscar informações nessa url mas, o problema na verdade é como foi explicado só fazer alteração removendo o objeto vazio do array que o seu código vai funcionar.

1
  • 1
    Foi justamente isso, funcionou perfeitamente, muito obrigado.
    – will
    Commented 27/12/2019 às 11:34

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 .