Javascript 如何修复data.map不是函数api

我正在尝试获取和显示api的数据

我试图显示数据，但不起作用

PokemonSpecies.js

import React from "react";
// import Loader from "./Loader";
import { Card, Col } from "react-bootstrap";

import { Container, Row } from "react-bootstrap";
import CardPokemon from "./containers/CardPokemon";

class PokemonSpecies extends React.Component {
  state = {
    data: [],
    isLoading: false,
    abilities: []
  };

  async componentDidMount() {
    const id = this.props.match.params.id;

    this.setState({ isLoading: true });
    try {
      const response = await fetch(`https://pokeapi.co/api/v2/pokemon/${id}`);
      const json = await response.json();
      this.setState({
        data: json,
        isLoading: false
      });
      console.log({ json });
    } catch (err) {
      console.log(err.msg);
      this.setState({ isLoading: false });
      throw err;
    }
  }

  render() {
    const { data } = this.state;
    return (
      <div className="Pokemon">
        <Container>
          <Row>
            <Col lg="4"></Col>
            <Col lg="4">
              <CardPokemon data={data} />
            </Col>
            <Col lg="4"></Col>
          </Row>
          <Row></Row>
        </Container>
      </div>
    );
  }
}

export default PokemonSpecies;

从“React”导入React；
//从“/Loader”导入加载程序；
从“react bootstrap”导入{Card，Col}；
从“react bootstrap”导入{Container，Row}；
从“/containers/cardpookemon”导入cardpookemon；
类PokemonSpecies扩展了React.Component{
状态={
数据：[]，
孤岛加载：false，
能力：[]
};
异步组件didmount（）{
const id=this.props.match.params.id；
this.setState（{isLoading:true}）；
试一试{
const response=等待获取(`https://pokeapi.co/api/v2/pokemon/${id}`）；
const json=await response.json（）；
这是我的国家({
数据：json，
孤岛加载：false
});
log（{json}）；
}捕捉（错误）{
console.log（err.msg）；
this.setState（{isLoading:false}）；
犯错误；
}
}
render（）{
const{data}=this.state；
返回(
);
}
}
导出默认口袋妖怪；

CardPokemon.js

import React from "react";

import DataSinglePokemon from "./DataSinglePokemon";

const CardPokemon = ({ data }) => {
  return (
    <>
      {data.map((info, index) => (
        <DataSinglePokemon
          key={info + index}
          id={info.id}
          name={info.name
            .toLowerCase()
            .split(" ")
            .map(letter => letter.charAt(0).toUpperCase() + letter.substring(1))
            .join(" ")}
          height={info.height}
          {...info}
        />
      ))}
    </>
  );
};

export default CardPokemon;

import React from "react";
import { Card, Col } from "react-bootstrap";
import "../../App.css";
const DataSinglePokemon = props => {
  const { height, name, id } = props;

  const urlImage = `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${id}.png?raw=true`;
  return (
    <Col lg={3}>
      <Card>
        <Card.Header>{id}</Card.Header>
        <Card.Body className="mx-auto">
          <Card.Title> {name} </Card.Title>
          <Card.Text>
            <img alt={name} src={urlImage} />
            <br></br>
            Taille : {height}
          </Card.Text>
        </Card.Body>
      </Card>
    </Col>
  );
};

export default DataSinglePokemon;

从“React”导入React；
从“/DataSinglePokemon”导入DataSinglePokemon；
const cardpookemon=（{data}）=>{
返回(
{data.map（（信息，索引）=>(
letter.charAt（0.toUpperCase（）+letter.substring（1））
.join（“”）
高度={info.height}
{…信息}
/>
))}
);
};
导出默认卡片口袋妖怪；

DataSinglePokemon.js

import React from "react";

import DataSinglePokemon from "./DataSinglePokemon";

const CardPokemon = ({ data }) => {
  return (
    <>
      {data.map((info, index) => (
        <DataSinglePokemon
          key={info + index}
          id={info.id}
          name={info.name
            .toLowerCase()
            .split(" ")
            .map(letter => letter.charAt(0).toUpperCase() + letter.substring(1))
            .join(" ")}
          height={info.height}
          {...info}
        />
      ))}
    </>
  );
};

export default CardPokemon;

import React from "react";
import { Card, Col } from "react-bootstrap";
import "../../App.css";
const DataSinglePokemon = props => {
  const { height, name, id } = props;

  const urlImage = `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${id}.png?raw=true`;
  return (
    <Col lg={3}>
      <Card>
        <Card.Header>{id}</Card.Header>
        <Card.Body className="mx-auto">
          <Card.Title> {name} </Card.Title>
          <Card.Text>
            <img alt={name} src={urlImage} />
            <br></br>
            Taille : {height}
          </Card.Text>
        </Card.Body>
      </Card>
    </Col>
  );
};

export default DataSinglePokemon;

从“React”导入React；
从“react bootstrap”导入{Card，Col}；
导入“../../App.css”；
const DataSinglePokemon=props=>{
const{height，name，id}=props；
常量urlImage=`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${id}.png？raw=true`；
返回(
{id}
{name}



Taille:{height}
);
};
导出默认数据SinglePokeMon；

我有json，但当我试图显示Pokemon的名称或功能时，我出现了这个错误，我尝试了很多东西，但我对React js是新手…：

TypeError: data.map is not a function
CardPokemon
src/components/containers/CardPokemon.js:7
   4 | 
   5 | const CardPokemon =({data}) =>{
   6 |     
>  7 |   return(
   8 |   
   9 |   <>
  10 |      {data.map((info,index) =>(

TypeError:data.map不是函数
卡片口袋妖怪
src/components/containers/cardpookemon.js:7
4 | 
5 | const cardpookemon=（{data}）=>{
6 |     
>7 |返回(
8 |   
9 |   
10 |{data.map（（信息，索引）=>(

我猜问题出在下面一行。你能检查一下API调用的响应吗

const response = await fetch(`https://pokeapi.co/api/v2/pokemon/${id}`);
const json = await response.json();
   this.setState({ 
      data: json,  // Check the data type of json. It should be in Array.
      isLoading: false
   });

---

我猜问题在下面一行。你能检查一下API调用的响应吗

const response = await fetch(`https://pokeapi.co/api/v2/pokemon/${id}`);
const json = await response.json();
   this.setState({ 
      data: json,  // Check the data type of json. It should be in Array.
      isLoading: false
   });

---

我看到您的代码运行良好，您犯的唯一错误是，

json

变量不是数组。它有一个

results

键，您需要在其中映射：

请参阅此日志：

因此，您需要这样做：

const json = await response.json();
      this.setState({
        data: json.results,
        isLoading: false
      });      

而不是只使用

数据

下面是我创建的演示沙盒，用于查看错误：

---

希望这能有所帮助。

我看到您的代码运行良好，您犯的唯一错误是，

json

变量不是数组。它有一个

results

键，您需要在其中映射：

请参阅此日志：

因此，您需要这样做：

const json = await response.json();
      this.setState({
        data: json.results,
        isLoading: false
      });      

而不是只使用

数据

下面是我创建的演示沙盒，用于查看错误：

---

希望这有帮助。

是的，在“Json”中，我有api页面上可以找到的所有内容。.map函数只能用于数组。如果我想显示不在数组中的数据，我如何显示此数据？而不是

data.map（）

，您可以直接将代码编写为

data.id

或

data.name

。谢谢，因为我使用此api，所以每个数组都需要在this.setState中声明一个新选项卡？是的，在“Json”中我有api页面上的所有内容。map函数只能用于数组。如果我想显示不在数组中的数据，如何显示该数据？而不是

data.map（）

，您可以直接将代码编写为

数据.id

或

数据.name

。谢谢，因为我使用此api，所以每个数组都需要在this.setState中声明一个新选项卡？我明白了，谢谢，但我犯了一个错误，好的api是：，带“1”，这是一个有很多数据的口袋妖怪的id，谢谢，但我犯了一个错误好的api是：，带“1”，这是一个有很多数据的口袋妖怪的id