javascript - 不能 .map() 一个看似数组的值

Question

当我控制台单独记录变量“pokemons”时，它确实返回一个数组。但是当我尝试映射它时，出现错误: TypeError: pokemons.map is not a function

我的代码:

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;

并且 map 在 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

您的 map() 失败的原因是 axios 返回了前几次调用的 promise 。所以你的子组件试图映射一个 promise ，它当然无法做到。解决此问题的另一种方法是检查数组的长度，并且仅在有长度时才进行映射。

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

这是一个显示其工作原理的链接:https://codesandbox.io/s/tempsandbox-okypp