javascript - 如何修复 data.map 不是函数 api
问题描述
我正在尝试拥有并显示 api 的数据。
https://pokeapi.co/api/v2/pokemon/1
我试图显示数据,但它不起作用。
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;
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;
DataSinglePokemon.js
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;
我有 json,但是当我尝试显示口袋妖怪的名称或能力时,我遇到了这个错误,我尝试了很多东西,但我是 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) =>(
解决方案
我看到你的代码工作正常,你犯的唯一错误是,json
变量不是数组。它有一个results
您需要在其中映射的键:
请参阅此日志:
所以你需要这样做:
const json = await response.json();
this.setState({
data: json.results,
isLoading: false
});
而不是只使用data
.
这是我为查看错误而创建的演示沙箱:https ://codesandbox.io/s/sleepy-jang-psedq
希望这可以帮助。
推荐阅读
- javascript - 如何完全推迟加载 Google reCaptcha 直到页面完全加载
- python - 使用python读取json文件以在postgres中创建数据库
- python-3.x - KeyError:[]未在轴中找到
- moodle - 带有 R-Exams 的 Moodle 表的不同问题副本
- flutter - Flutter:setState 不更新 UI
- golden-layout - GoldenLayout 隐藏/显示组件(再次)
- testing - Dart 库:从测试文件夹中导出文件
- java - 使用 Spring Autowired 注解时的 Nullpoint
- r - R脚本/包来监听网页上的端点?
- amazon-web-services - ClientError:调用 PutObject 操作时发生错误 (AccessDenied):访问被拒绝