Question

我正在使用 Pokemon API 制作 react.js 应用程序，以扩展我对 React 的理解。我在尝试映射状态 pokeList 时遇到了问题。每次我呈现页面时，它都会显示 TypeError: pokeList.map is not a function。几个小时以来，我一直在尝试几种不同的方法，但在 Google 上找不到任何有用的东西。

代码底部的注释是我尝试的另一种方法，它返回了相同的错误。

import React, { useEffect, useState } from 'react';
import axios from 'axios';

import Card from '../components/CardView';
import Selected from '../components/Selected';

const Main = (props) => {

  const [pokeList, setPokeList] = useState([]);
  const [selectedPokemon, setSelectedPokemon] = useState("");
  const [selectedPokeData, setSelectedPokeData] = useState([]);
  const [loaded, setLoaded] = useState(false);
  let renderNum = 10;

  useEffect(() => {
    axios.get("https://pokeapi.co/api/v2/pokemon?limit=" + renderNum)
      .then(res => setPokeList(res.data))
  }, [])

  useEffect(() => {
    axios.get("https://pokeapi.co/api/v2/pokemon/" + selectedPokemon)
      .then(res => setSelectedPokeData(res.data))
      .then(setLoaded(true))
  }, [])

  return(
    <div className="container">
      {loaded === false ?

      <h1>loading...</h1> :

      <div className="row">
        <div className="col">
          {pokeList.map((pokemon, idx) =>
            <div key={idx}>
              <Card pokeData={pokemon} selectedPokemon={selectedPokemon} />
            </div>
          )}
        </div>
        <div className="col">
          <Selected pokeData={selectedPokeData}/>
        </div>
      </div>
      }
    </div>
  )
}

export default Main;

// {pokeList.map(pokemon => {
//   return (
//       <div>
//         <Card allPokeData={pokemon} currentSelectedPokemon={selectedPokemon}/>
//       </div>
//     )
//   })}

我的目标是来自每个单独的 pokemon 的数据将通过 props 发送，并将呈现每个 pokemon 的名称、类型和图片。所以当页面第一次呈现时，应该会显示 10 个 pokemon 及其信息。

Answer 1

这是因为您从 Pokemon API 中分配了错误的返回值。您尝试分配的 array 在 res.data.results 内。

改为这样做：

useEffect(() => {
  axios.get("https://pokeapi.co/api/v2/pokemon?limit=" + renderNum)
    .then(res => setPokeList(res.data.results))
}, []);

无论如何，确保您分配给变量的类型始终是一个好习惯，特别是如果它是您要映射的数组。

不断收到 TypeError: .map is not a function

1 个答案: