Не могу .map () значение, которое кажется массивом

Question

Когда я консоль регистрирую переменную «pokemons» отдельно, она возвращает массив. Но когда я пытаюсь отобразить его, я получаю сообщение об ошибке: TypeError: pokemons.map не является функцией

мой код:

import React, { useState, useEffect } from "react";
import "./App.css";
import PokeList from "./components/PokeList";
import Paginator from "./components/Paginator";
import axios from "axios";

function App() {
  let [pokemons, setPokemons] = useState([]);
  let [status, setStatus] = useState(false);

  useEffect(
    () =>
      setPokemons(
        axios.get("https://pokeapi.co/api/v2/pokemon").then((res) => {
          setPokemons(res.data.results.map((poki) => poki.name));
        })
      ),
    []
  );
  return (
    <div className="App">
      <PokeList pokemons={pokemons}></PokeList> <Paginator></Paginator>
    </div>
  );
}

export default App;

и карта вызывается в компоненте PokeList:

import React from "react";

const PokeList = ({ pokemons }) => {
  console.log(pokemons.map((poki) => "Yellow"));
  return (
    <div>
      <h1>Here are all your pokis: </h1>
    </div>
  );
};

export default PokeList;

Answer 1

Поскольку вы завернули все axios promise object в setPokemans:

Попробуйте ниже:

Следующий код возвращает обещаниеобъект, а не массив!

axios.get("https://pokeapi.co/api/v2/pokemon").then((res) => {
   setPokemons(res.data.results.map((poki) => poki.name));
}) // returns object

Answer 2

Причина, по которой ваш map() потерпел неудачу, в том, что axios возвращал обещание для первой пары вызовов. Таким образом, ваш дочерний компонент пытался отобразить обещание, что, конечно, он не мог сделать. Другим способом решения этой проблемы является проверка длины массива и отображение только при наличии длины.

    if(pokemons.length){
     pokemons.map((poke) => {
      console.log(poke)
     })
    }

Вот ссылка, чтобы показать, как она работает: https://codesandbox.io/s/tempsandbox-okypp

Answer 3

Я изменил свой код на это:

import React, { useState, useEffect } from "react";
import "./App.css";
import PokeList from "./components/PokeList";
import Paginator from "./components/Paginator";
import axios from "axios";

function App() {
  let [pokemons, setPokemons] = useState([]);
  let [status, setStatus] = useState(false);

  useEffect(
    () =>
      axios.get("https://pokeapi.co/api/v2/pokemon").then((res) => {
        /* setStatus(true);
          console.log(status); */
        setPokemons(res.data.results.map((poki) => poki.name));
      }),
    []
  );
  return (
    <div className="App">
      <PokeList pokemons={pokemons} status={status}></PokeList>{" "}
      <Paginator></Paginator>
    </div>
  );
}

export default App;

и теперь карта работает. Кто-то может объяснить, почему? Единственным видимым изменением, которое я сделал, было удаление setPokemons () вокруг вызова axios, который был там по ошибке. Может ли это быть причиной того, почему я получаю странные переменные покемонов?