不能 .map() 一个似乎是 Array 的值

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;并在 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 返回了前几次调用的承诺。所以你的子组件试图映射一个承诺，这当然不能做到。解决此问题的另一种方法是检查数组的长度，并且仅在有长度时才进行映射。

    if(pokemons.length){

     pokemons.map((poke) => {

      console.log(poke)

     })

    }

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

Answer 2

因为你把整个包装axios promise object成 setPokemans ：

试试下面：

下面的代码返回一个promise对象，而不是一个数组！

axios.get("https://pokeapi.co/api/v2/pokemon").then((res) => {

   setPokemons(res.data.results.map((poki) => poki.name));

}) // returns object

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;

现在地图正在工作。有人可以解释为什么吗？我所做的唯一可见更改是删除了 axios 调用周围的 setPokemons()，这是错误的。这可能是我得到奇怪的 pokemons 变量的原因吗？