不能 .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 返回了前几次调用的承诺。所以你的子组件试图映射一个承诺，这当然不能做到。解决此问题的另一种方法是检查数组的长度，并且仅在有长度时才进行映射。&nbsp; &nbsp; if(pokemons.length){&nbsp; &nbsp; &nbsp;pokemons.map((poke) => {&nbsp; &nbsp; &nbsp; console.log(poke)&nbsp; &nbsp; &nbsp;})&nbsp; &nbsp; }这是一个显示它工作的链接：https : //codesandbox.io/s/tempsandbox-okypp

Answer 2

因为你把整个包装axios promise object成 setPokemans ：试试下面：下面的代码返回一个promise对象，而不是一个数组！axios.get("https://pokeapi.co/api/v2/pokemon").then((res) => {&nbsp; &nbsp;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() {&nbsp; let [pokemons, setPokemons] = useState([]);&nbsp; let [status, setStatus] = useState(false);&nbsp; useEffect(&nbsp; &nbsp; () =>&nbsp; &nbsp; &nbsp; axios.get("https://pokeapi.co/api/v2/pokemon").then((res) => {&nbsp; &nbsp; &nbsp; &nbsp; /* setStatus(true);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(status); */&nbsp; &nbsp; &nbsp; &nbsp; setPokemons(res.data.results.map((poki) => poki.name));&nbsp; &nbsp; &nbsp; }),&nbsp; &nbsp; []&nbsp; );&nbsp; return (&nbsp; &nbsp; <div className="App">&nbsp; &nbsp; &nbsp; <PokeList pokemons={pokemons} status={status}></PokeList>{" "}&nbsp; &nbsp; &nbsp; <Paginator></Paginator>&nbsp; &nbsp; </div>&nbsp; );}export default App;现在地图正在工作。有人可以解释为什么吗？我所做的唯一可见更改是删除了 axios 调用周围的 setPokemons()，这是错误的。这可能是我得到奇怪的 pokemons 变量的原因吗？