时间戳

首页 > 解决方案 > 我无法在 React.js 中过滤我的数组

reactjs - 我无法在 React.js 中过滤我的数组

问题描述

我想知道是否有人可以帮助我使用 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;

标签： reactjsfilter

解决方案

首先，我建议您将 JSX 中的逻辑（JS 代码）与视图（HTML）分开，以便获得更清晰的代码。

由于您想按 id 显示单个戳，我建议您使用 find 而不是 filter。

还有一件事。“id”常量是一个字符串。您正在对数字使用严格的类型检查 (===)，这将返回 false。

const foundPoke = pokemon.find(poke => poke.id === Number(id));

if (!foundPoke) {
  return <div>Not found!</div>
}

return (
  <div>
    {poke.name}
  </div>
);

我还假设“口袋妖怪”道具不返回对象数组。我对您的问题添加了评论，要求您粘贴 console.log(JSON.stringify(pokemon, null, 2)) 的输出

[题外话] 既然你说你只写了3个月的代码，我建议你使用合适的IDE并配置eslint和prettier。这些工具将帮助您进行代码样式设置（我看到缩进问题）

推荐阅读