当我使用 if 语句 react.js 时，一些图像没有显示答案

【问题标题】：some of the image not showing up when I use if statement react.js当我使用 if 语句 react.js 时，一些图像没有显示
【发布时间】：2022-02-03 14:24:09
【问题描述】：

我正在尝试制作一个部分，每个类别仅显示 10 张图像，我想在此之后插入一个按钮并将其与其余项目链接，但是一旦我使用 if 语句，某些类别根本不会显示如果密钥为

import React , {useState , useEffect , useRef} from "react";
function Category() {
    const [active , setActive] =useState(false)
    const [button , setButton] = useState('all')
    const [data , setData] =useState([])
    useEffect( async()=>{
        const data = await fetch('https://ktgamez.com/storage/games.json')
        const items = await data.json()
        setData(items)
    } , [fetch])

    const handleClickAction = ()=>{
        setButton('Action')
     
    }
    const handleClickAll = ()=>{
        setButton('all')
     
    }
    const handleClicEducational = ()=>{
        setButton('Educational')
        
        
    }
    const handleClicArcade = ()=>{
        setButton('Arcade')
        
    }
    const handleClicSports = ()=>{
        setButton('Sports & Racing')
        
    }
    const handleClicPuzzle = ()=>{
        setButton('Puzzle')
        
    }

  return (
    <div className="category">
        <p className="active-category">{button} Games</p>
      <div className="dropdown">
            <div className="dropdown-btn" onClick={()=>{
                setActive(!active)
            }}><h3> Categories </h3></div>
            {active &&(
            <div className="dropdown-content">
                    <div onClick={handleClickAll} className="dropdown-item">
                                 All
                              </div>
                                 <div onClick={handleClickAction} className="dropdown-item">
                                 Action
                              </div>
                            <div onClick={handleClicEducational} className="dropdown-item">
                                 Educational
                            </div>
                         <div onClick={handleClicArcade}  className="dropdown-item">
                                Arcade 
                         </div>
                        <div onClick={handleClicSports}  className="dropdown-item">
                         Sports and Racing
                    </div>
                    <div onClick={handleClicPuzzle} className="dropdown-item">
                         Puzzle
                    </div>
                </div>
            )}
      </div>
  
      <div className="cards">
      {
           
          data.map((data , key)=> {
            // if ( key < 10 && button === 'all' || key <10 && button === data.genre_name ){
               //or :  if(key < 10){return}
               //even if tried to do this style= {{display : key <10 ? 'block' : 'none'}}
             if (key < 10 && button === 'all' || key < 10 && button === data.genre_name){
                return(
                    <div className="card-content" key={key} >
                        <div className="card-img">
                            <img src={data.game_cover_url} alt="" />
                        </div>
                        <div className="card-inner-title">
                            <p>{data.game_name}</p>
                        </div>
                    </div>
                )
              } 
        } 
        ) 
     }
      </div>
      <button>see all</button>
    </div>
  );
}

【问题讨论】：

标签： javascript html css reactjs

【解决方案1】：

前十元素秀

data.length > 0 && data.slice(0, 10).map((data , key)=> {
    ...your code
})

【讨论】：

【解决方案2】：

不要使用密钥，而是尝试这样做

 data.map(data => {  
         //Your Code Here
}).slice(0,10);

这里的 .slice() 方法会将你的数组大小减少到 10。所以只要把整个拿出来切下来

【讨论】：