1

tudo bem?

Estou começando agora no mundo do React e estou com esse pequeno problema em questão. Como faço para especificar o consumo de um Array especifico com o React?

Por exemplo:

"count": 1118,
  "next": "https://pokeapi.co/api/v2/pokemon?offset=20&limit=20",
  "previous": null,
  "results": [
    {
      "name": "bulbasaur",
      "url": "https://pokeapi.co/api/v2/pokemon/1/"
    },
    {
      "name": "ivysaur",
      "url": "https://pokeapi.co/api/v2/pokemon/2/"
    },
    {
      "name": "venusaur",
      "url": "https://pokeapi.co/api/v2/pokemon/3/"
    }

....

Eu já consigo como consumir todos os dados do array, porém, como faço pra pegar apenas 1? Tipo, como faço para pegar apenas o:

"name": "bulbasaur",
"url": "https://pokeapi.co/api/v2/pokemon/1/"

eu já dei um console.log(response.data.results[0]) e me mostrou exatamente o que eu queria, mas sempre que eu faço isso no this.setState({pokemon: response.data.results}) o .map da um erro falando que não é uma função e vi que .map só consegue funcionar com array...

import React, { Component } from 'react';
import axios from 'axios';


const api = axios.create({
    baseURL: 'https://pokeapi.co/api/v2/pokemon'
})



class App extends Component{

  state={
    pokemon: [],

  }

  async componentDidMount(){
      const response = await api.get('');
      this.setState({pokemon: response.data.results})
  }


  render() {

    const { pokemon } = this.state;

    return (
      <div>
        <h1>Pkemon</h1>
        {pokemon.map(pk => (
          <li key={pk}>
            <h2>{pk.name}</h2>
            <h2>{pk.url}</h2>

          </li>
        ))}
      </div>
    );
  };
};

export default App;

1
  • A primeira coisa que notei é que não existe response.data.result - segundo o exemplo de retorno que vc colocou, seria response.results.
    – BrTkCa
    25/01/2021 às 17:28

1 Resposta 1

1

Quando se quer trabalhar com estado precisa criar dentro do state as informações assim que deseja organizar, no seu caso deseja pegar a primeira posição do array então indique [0] se o mesmo for um array tendo uma quantidade maior do que zero e sempre separe as informações. O seu erro é porque se tem uma posição do array que é um objeto, e por isso map é utilizado como método de array.

Nesse exemplo eu utilize dois estados e no pokemon é para demonstrar o exemplo que para sua exibição é totalmente diferente quando é para array, exemplo:

const api = axios.create({
    baseURL: 'https://pokeapi.co/api/v2/pokemon'
});


class App extends React.Component {
  state={
    pokemons: [],
    pokemon: null
  }
  componentDidMount(){
      api.get('')
        .then(response => {
          this.setState({pokemons: response.data.results});
          if (response.data.results.length) {
              this.setState({pokemon: response.data.results[0]});
          }
        });      
  }
  render() {
    const { pokemon } = this.state;
    return (
      <div>
        <h1>Pkemon</h1>
        <ul>
        {pokemon && (
          <li key={pokemon.name}>
            <h2>{pokemon.name}</h2>
            <h2>{pokemon.url}</h2>
          </li>
        )}
        </ul>
      </div>
    );
  };
};

ReactDOM.render( <App/> , document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.0/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<div id="root">...</div>

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 .