我想知道是否有人可以帮助我在React.js中使用我的过滤器。我的React应用程序已连接到Node.js应用程序，该应用程序从Pokemon API获取数据。我基本上只想在我的前端路由/ pokemon：id上显示一张宠物小精灵卡，并为此进行过滤，然后通过我的数组进行映射。由于某种原因，这不起作用，我想知道是否有人可以检查我的代码，看看我是否犯了一个简单的错误。我认为问题出在我过滤口袋妖怪卡的方式上，因为当我拿走过滤器时，一切正常。我只编码了3个月，所以请原谅我的草率代码！
import React, {useState} from "react";
import { useParams } from "react-router-dom";
import { makeStyles } from '@material-ui/core/styles';
import clsx from 'clsx';
import Card from '@material-ui/core/Card';
import CardHeader from '@material-ui/core/CardHeader';
import CardMedia from '@material-ui/core/CardMedia';
import CardContent from '@material-ui/core/CardContent';
import CardActions from '@material-ui/core/CardActions';
import Collapse from '@material-ui/core/Collapse';
import IconButton from '@material-ui/core/IconButton';
import Typography from '@material-ui/core/Typography';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
const useStyles = makeStyles((theme) => ({
root: {
maxWidth: 345,
},
media: {
height: 0,
paddingTop: '56.25%', // 16:9
},
expand: {
transform: 'rotate(0deg)',
marginLeft: 'auto',
transition: theme.transitions.create('transform', {
duration: theme.transitions.duration.shortest,
}),
},
expandOpen: {
transform: 'rotate(180deg)',
},
}));
const PokeDetail = ({ pokemon }) => {
const { id } = useParams();
const classes = useStyles();
const [expanded, setExpanded] = useState(false);
const handleExpandClick = () => {
setExpanded(!expanded);
};
return (
<div>
{pokemon.length >= 1 &&
pokemon
.filter((poke) => {
return poke.id === id
})
.map((poke) => (
<div>
<Card className={classes.root}>
<CardHeader
title={poke.name.english}
subheader={poke.type}
/>
<CardMedia
className={classes.media}
image="/Images/"
title={poke.name.english}
/>
<CardContent>
<Typography variant="body2" color="textSecondary" component="p">
Japanese: {poke.name.japanese} Chinese: {poke.name.chinese} French: {poke.name.french}
</Typography>
</CardContent>
<CardActions disableSpacing>
<IconButton
className={clsx(classes.expand, {
[classes.expandOpen]: expanded,
})}
onClick={handleExpandClick}
aria-expanded={expanded}
aria-label="show more"
>
<ExpandMoreIcon />
</IconButton>
</CardActions>
<Collapse in={expanded} timeout="auto" unmountOnExit>
<CardContent>
<Typography paragraph>Description</Typography>
<Typography paragraph>
Attack: {poke.base.Attack}
Defense: {poke.base.Defense}
Speed: {poke.base.Speed}
</Typography>
</CardContent>
</Collapse>
</Card>
</div>
))}
</div>
);
};
export default PokeDetail;
答案 0 :(得分：0)
首先，我建议您将JSX中的逻辑（JS代码）与视图（HTML）分开，以使代码更简洁。
由于您要按ID显示单个戳，因此建议您使用find而不是filter。
还有一件事。 “ id”常量是一个字符串。您正在使用带有数字的严格类型检查（===），该数字将返回false。
import codecs
# File read
with codecs.open(filename, 'r', encoding='utf8') as f:
text = f.read()
# File write
with codecs.open(filename, 'w', encoding='utf8') as f:
f.write(text)
我还假设“ pokemon”道具不返回对象数组。我对您的问题添加了评论，要求您粘贴console.log（JSON.stringify（pokemon，null，2））
[有点偏离主题]因为您说过您只编码3个月，所以我建议您使用适当的IDE并配置eslint和漂亮。这些工具将帮助您进行代码样式设置（我看到缩进问题）
答案 1 :(得分：0)
这是我在控制台中看到的：
[
{
"id": 31,
"name": {
"english": "Nidoqueen",
"japanese": "ニドクイン",
"chinese": "尼多后",
"french": "Nidoqueen"
},
"type": [
"Poison",
"Ground"
],
"base": {
"HP": 90,
"Attack": 92,
"Defense": 87,
"Sp. Attack": 75,
"Sp. Defense": 85,
"Speed": 76
}
},
{
"id": 32,
"name": {
"english": "Nidoran♂",
"japanese": "ニドラン♂",
"chinese": "尼多朗",
"french": "Nidoran♂"
},
"type": [
"Poison"
],
"base": {
"HP": 46,
"Attack": 57,
"Defense": 40,
"Sp. Attack": 40,
"Sp. Defense": 40,
"Speed": 50
}
},
{
"id": 33,
"name": {
"english": "Nidorino",
"japanese": "ニドリーノ",
"chinese": "尼多力诺",
"french": "Nidorino"
},
"type": [
"Poison"
],
"base": {
"HP": 61,
"Attack": 72,
"Defense": 57,
"Sp. Attack": 55,
"Sp. Defense": 55,
"Speed": 65
}
},
{
"id": 34,
"name": {
"english": "Nidoking",
"japanese": "ニドキング",
"chinese": "尼多王",
"french": "Nidoking"
},
"type": [
"Poison",
"Ground"
],
"base": {
"HP": 81,
"Attack": 102,
"Defense": 77,
"Sp. Attack": 85,
"Sp. Defense": 75,
"Speed": 85
}
},
{
"id": 35,
"name": {
"english": "Clefairy",
"japanese": "ピッピ",
"chinese": "皮皮",
"french": "Mélofée"
},
"type": [
"Fairy"
],
"base": {
"HP": 70,
"Attack": 45,
"Defense": 48,
"Sp. Attack": 60,
"Sp. Defense": 65,
"Speed": 35
}
},
{
"id": 36,
"name": {
"english": "Clefable",
"japanese": "ピクシー",
"chinese": "皮可西",
"french": "Mélodelfe"
},
"type": [
"Fairy"
],
"base": {
"HP": 95,
"Attack": 70,
"Defense": 73,
"Sp. Attack": 95,
"Sp. Defense": 90,
"Speed": 60
}
},
{
"id": 37,
"name": {
"english": "Vulpix",
"japanese": "ロコン",
"chinese": "六尾",
"french": "Goupix"
},
"type": [
"Fire"
],
"base": {
"HP": 38,
"Attack": 41,
"Defense": 40,
"Sp. Attack": 50,
"Sp. Defense": 65,
"Speed": 65
}
},
{
"id": 38,
"name": {
"english": "Ninetales",
"japanese": "キュウコン",
"chinese": "九尾",
"french": "Feunard"
},
"type": [
"Fire"
],
"base": {
"HP": 73,
"Attack": 76,
"Defense": 75,
"Sp. Attack": 81,
"Sp. Defense": 100,
"Speed": 100
}
},
{
"id": 39,
"name": {
"english": "Jigglypuff",
"japanese": "プリン",
"chinese": "胖丁",
"french": "Rondoudou"
},
"type": [
"Normal",
"Fairy"
],
"base": {
"HP": 115,
"Attack": 45,
"Defense": 20,
"Sp. Attack": 45,
"Sp. Defense": 25,
"Speed": 20
}
},
{
"id": 40,
"name": {
"english": "Wigglytuff",
"japanese": "プクリン",
"chinese": "胖可丁",
"french": "Grodoudou"
},
"type": [
"Normal",
"Fairy"
],
"base": {
"HP": 140,
"Attack": 70,
"Defense": 45,
"Sp. Attack": 85,
"Sp. Defense": 50,
"Speed": 45
}
},
{
"id": 41,
"name": {
"english": "Zubat",
"japanese": "ズバット",
"chinese": "超音蝠",
"french": "Nosferapti"
},
"type": [
"Poison",
"Flying"
],
"base": {
"HP": 40,
"Attack": 45,
"Defense": 35,
"Sp. Attack": 30,
"Sp. Defense": 40,
"Speed": 55
}
},
{
"id": 42,
"name": {
"english": "Golbat",
"japanese": "ゴルバット",
"chinese": "大嘴蝠",
"french": "Nosferalto"
},
"type": [
"Poison",
"Flying"
],
"base": {
"HP": 75,
"Attack": 80,
"Defense": 70,
"Sp. Attack": 65,
"Sp. Defense": 75,
"Speed": 90
}
},
{
"id": 43,
"name": {
"english": "Oddish",
"japanese": "ナゾノクサ",
"chinese": "走路草",
"french": "Mystherbe"
},
"type": [
"Grass",
"Poison"
],
"base": {
"HP": 45,
"Attack": 50,
"Defense": 55,
"Sp. Attack": 75,
"Sp. Defense": 65,
"Speed": 30
}
},
{
"id": 44,
"name": {
"english": "Gloom",
"japanese": "クサイハナ",
"chinese": "臭臭花",
"french": "Ortide"
},
"type": [
"Grass",
"Poison"
],
"base": {
"HP": 60,
"Attack": 65,
"Defense": 70,
"Sp. Attack": 85,
"Sp. Defense": 75,
"Speed": 40
}
},
{
"id": 45,
"name": {
"english": "Vileplume",
"japanese": "ラフレシア",
"chinese": "霸王花",
"french": "Rafflesia"
},
"type": [
"Grass",
"Poison"
],
"base": {
"HP": 75,
"Attack": 80,
"Defense": 85,
"Sp. Attack": 110,
"Sp. Defense": 90,
"Speed": 50
}
},
{
"id": 46,
"name": {
"english": "Paras",
"japanese": "パラス",
"chinese": "派拉斯",
"french": "Paras"
},
"type": [
"Bug",
"Grass"
],
"base": {
"HP": 35,
"Attack": 70,
"Defense": 55,
"Sp. Attack": 45,
"Sp. Defense": 55,
"Speed": 25
}
},
{
"id": 47,
"name": {
"english": "Parasect",
"japanese": "パラセクト",
"chinese": "派拉斯特",
"french": "Parasect"
},
"type": [
"Bug",
"Grass"
],
"base": {
"HP": 60,
"Attack": 95,
"Defense": 80,
"Sp. Attack": 60,
"Sp. Defense": 80,
"Speed": 30
}
},
{
"id": 48,
"name": {
"english": "Venonat",
"japanese": "コンパン",
"chinese": "毛球",
"french": "Mimitoss"
},
"type": [
"Bug",
"Poison"
],
"base": {
"HP": 60,
"Attack": 55,
"Defense": 50,
"Sp. Attack": 40,
"Sp. Defense": 55,
"Speed": 45
}
},
{
"id": 49,
"name": {
"english": "Venomoth",
"japanese": "モルフォン",
"chinese": "摩鲁蛾",
"french": "Aéromite"
},
"type": [
"Bug",
"Poison"
],
"base": {
"HP": 70,
"Attack": 65,
"Defense": 60,
"Sp. Attack": 90,
"Sp. Defense": 75,
"Speed": 90
}
},
{
"id": 50,
"name": {
"english": "Diglett",
"japanese": "ディグダ",
"chinese": "地鼠",
"french": "Taupiqueur"
},
"type": [
"Ground"
],
"base": {
"HP": 10,
"Attack": 55,
"Defense": 25,
"Sp. Attack": 35,
"Sp. Defense": 45,
"Speed": 95
}
},
{
"id": 51,
"name": {
"english": "Dugtrio",
"japanese": "ダグトリオ",
"chinese": "三地鼠",
"french": "Triopikeur"
},
"type": [
"Ground"
],
"base": {
"HP": 35,
"Attack": 100,
"Defense": 50,
"Sp. Attack": 50,
"Sp. Defense": 70,
"Speed": 120
}
},
{
"id": 52,
"name": {
"english": "Meowth",
"japanese": "ニャース",
"chinese": "喵喵",
"french": "Miaouss"
},
"type": [
"Normal"
],
"base": {
"HP": 40,
"Attack": 45,
"Defense": 35,
"Sp. Attack": 40,
"Sp. Defense": 40,
"Speed": 90
}
},
{
"id": 53,
"name": {
"english": "Persian",
"japanese": "ペルシアン",
"chinese": "猫老大",
"french": "Persian"
},
"type": [
"Normal"
],
"base": {
"HP": 65,
"Attack": 70,
"Defense": 60,
"Sp. Attack": 65,
"Sp. Defense": 65,
"Speed": 115
}
},
{
"id": 54,
"name": {
"english": "Psyduck",
"japanese": "コダック",
"chinese": "可达鸭",
"french": "Psykokwak"
},
"type": [
"Water"
],
"base": {
"HP": 50,
"Attack": 52,
"Defense": 48,
"Sp. Attack": 65,
"Sp. Defense": 50,
"Speed": 55
}
},
{
"id": 55,
"name": {
"english": "Golduck",
"japanese": "ゴルダック",
"chinese": "哥达鸭",
"french": "Akwakwak"
},
"type": [
"Water"
],
"base": {
"HP": 80,
"Attack": 82,
"Defense": 78,
"Sp. Attack": 95,
"Sp. Defense": 80,
"Speed": 85
}
},
{
"id": 56,
"name": {
"english": "Mankey",
"japanese": "マンキー",
"chinese": "猴怪",
"french": "Férosinge"
},
"type": [
"Fighting"
],
"base": {
"HP": 40,
"Attack": 80,
"Defense": 35,
"Sp. Attack": 35,
"Sp. Defense": 45,
"Speed": 70
}
},
{
"id": 57,
"name": {
"english": "Primeape",
"japanese": "オコリザル",
"chinese": "火暴猴",
"french": "Colossinge"
},
"type": [
"Fighting"
],
"base": {
"HP": 65,
"Attack": 105,
"Defense": 60,
"Sp. Attack": 60,
"Sp. Defense": 70,
"Speed": 95
}
},
{
"id": 58,
"name": {
"english": "Growlithe",
"japanese": "ガーディ",
"chinese": "卡蒂狗",
"french": "Caninos"
},
"type": [
"Fire"
],
"base": {
"HP": 55,
"Attack": 70,
"Defense": 45,
"Sp. Attack": 70,
"Sp. Defense": 50,
"Speed": 60
}
},
{
"id": 59,
"name": {
"english": "Arcanine",
"japanese": "ウインディ",
"chinese": "风速狗",
"french": "Arcanin"
},
"type": [
"Fire"
],
"base": {
"HP": 90,
"Attack": 110,
"Defense": 80,
"Sp. Attack": 100,
"Sp. Defense": 80,
"Speed": 95
}
},
{
"id": 60,
"name": {
"english": "Poliwag",
"japanese": "ニョロモ",
"chinese": "蚊香蝌蚪",
"french": "Ptitard"
},
"type": [
"Water"
],
"base": {
"HP": 40,
"Attack": 50,
"Defense": 40,
"Sp. Attack": 40,
"Sp. Defense": 40,
"Speed": 90
}
}
]
答案 2 :(得分：-1)
尝试删除条件语句。
pokemon.length >= 1 &&
答案 3 :(得分：-1)
请尝试;
{{1}}