Javascript Can'；map（）一个似乎是数组的值

当我单独记录变量“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;

import React，{useState，useffect}来自“React”；
导入“/App.css”；
从“/components/PokeList”导入PokeList；
从“/components/Paginator”导入分页器；
从“axios”导入axios；
函数App（）{
让[pokemons，setPokemons]=useState（[]）；
let[status，setStatus]=useState（false）；
使用效果(
() =>
口袋妖怪(
axios.get（“https://pokeapi.co/api/v2/pokemon）然后（（res）=>{
setPokemons（res.data.results.map（（poki）=>poki.name））；
})
),
[]
);
返回(
);
}
导出默认应用程序；

该地图在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;

从“React”导入React；
常量口袋妖怪=（{pokemons}）=>{
console.log（pokemons.map（（poki）=>“黄色”）；
返回(
以下是您的所有pokis：
);
};
导出默认PokeList；

我将代码更改为：

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;

import React，{useState，useffect}来自“React”；
导入“/App.css”；
从“/components/PokeList”导入PokeList；
从“/components/Paginator”导入分页器；
从“axios”导入axios；
函数App（）{
让[pokemons，setPokemons]=useState（[]）；
let[status，setStatus]=useState（false）；
使用效果(
() =>
axios.get（“https://pokeapi.co/api/v2/pokemon）然后（（res）=>{
/*设置状态（真）；
控制台日志（状态）*/
setPokemons（res.data.results.map（（poki）=>poki.name））；
}),
[]
);
返回(
{" "}
);
}
导出默认应用程序；

---

现在地图开始工作了。有人能解释一下原因吗？我所做的唯一可见的更改是删除了axios调用周围的setPokemons（），这是错误的。这可能是我使用奇怪的口袋妖怪变量的原因吗？

我将代码更改为：

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;

import React，{useState，useffect}来自“React”；
导入“/App.css”；
从“/components/PokeList”导入PokeList；
从“/components/Paginator”导入分页器；
从“axios”导入axios；
函数App（）{
让[pokemons，setPokemons]=useState（[]）；
let[status，setStatus]=useState（false）；
使用效果(
() =>
axios.get（“https://pokeapi.co/api/v2/pokemon）然后（（res）=>{
/*设置状态（真）；
控制台日志（状态）*/
setPokemons（res.data.results.map（（poki）=>poki.name））；
}),
[]
);
返回(
{" "}
);
}
导出默认应用程序；

---

现在地图开始工作了。有人能解释一下原因吗？我所做的唯一可见的更改是删除了axios调用周围的setPokemons（），这是错误的。这可能是我得到奇怪的口袋妖怪变量的原因吗？

因为您将整个

axios promise对象

包装到了setPokemans中：

请尝试以下内容：

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

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

---

因为您将整个

axios promise对象

包装到了setPokemans中：

请尝试以下内容：

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

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

您的

map（）

失败的原因是axios在前几次调用中返回了承诺。因此，您的子组件试图映射一个承诺，但它当然不能这样做。解决此问题的另一种方法是检查数组的长度，并且仅当存在长度时才进行映射

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

这里有一个链接显示它的工作原理：

您的

map（）

失败的原因是因为axios在前几次调用中返回了承诺。因此，您的子组件试图映射一个承诺，但它当然不能这样做。解决此问题的另一种方法是检查数组的长度，并且仅当存在长度时才进行映射

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

---

这里有一个显示它工作的链接：

我认为你不应该把

setPokemons

包装在你的

axios

call上。你能在映射前添加另一个console.log并输出pokemons看看你有什么吗？以前，它应该记录普通数组，但现在它记录这个：[]并承诺{}现在，我删除了外部setPokemons（）并在axios调用中添加了一个。现在它的控制台记录如下：（20）[“bulbasaur”、“ivysaur”、“venusaur”、“charmander”、“charmeleon”、“charizard”、“squirtle”、“Warortle”、“Blanoise”、“caterpie”、“metapod”、“butterfree”、“weedle”、“kakuna”、“Beetrill”、“pidgey”、“pidgeotto”、“pidgeot”、“rattata”、“raticate”]我认为你不应该把

setPokemons

包装在你的

axios

call上。你可以在map之前添加另一个console.log，然后输出pokemons来看看你有什么吗？以前，它记录了正常数组，但现在它记录了以下内容：[]和{}现在我删除了外部setPokemons（），并在axios调用中添加了一个。现在它的控制台记录如下：（20）[“bulbasaur”、“ivysaur”、“venusaur”、“charmander”、“charmeleon”、“charizard”、“squirtle”、“Warortle”、“Blanoise”、“caterpie”、“metapod”、“butterfree”、“weedle”、“kakuna”、“Beetrill”、“pidgey”、“pidgeotto”、“pidgeot”、“rattata”、“raticate”]

axios.get

返回，不是数组。

axios.get

返回数组，而不是数组。