反应，Json 数组

Question

所以基本上我有一个包含数组的 Json 文件，我有 2 个组件 Champions 和 Skills 显示数组，当我单击它显示特定的 div 时，它正在映射项目。现在我已经创建了搜索组件，当我在 json 文件中写入对象的名称时，我希望它只显示那个并隐藏其他的，我已经开始构建它，我想知道是否我走在正确的轨道上，如果我不是，如果我能得到一些帮助，我将非常感激。注意：我在 Json 文件中有更多项目

Champion component
import React, {useState} from 'react'
import data from './data.json'
import  './Champions.css'
import Skills from './Skills'



const Champions = () => {
  const [toggleShow, setToggleShow] = useState(false);
  const [currentSelectedChampion, setCurrentSelectedChampion] = useState({});

  const handleSelectChampion = (id) => {
    if (!toggleShow) setToggleShow(true);
    const currentChampion = data.filter((champ) => champ.id === id)[0];
    setCurrentSelectedChampion(currentChampion);

  };

  return (
    
    <div className="champions">
      {data.map((postData) => {
        return (
          <div  onClick={() => handleSelectChampion(postData.id) } >
            <div className="champion">
              <img className="champion__Image" src={postData.image}></img>
              <h4 className="champion__Name">{postData.name}</h4>
            
             
               
              {toggleShow && currentSelectedChampion.id === postData.id && (
                <>
                  <Skills currentChampion={currentSelectedChampion} />
                  <p onClick={() => setToggleShow(false)}>Close</p>
                </>
              )}
             </div>
          </div>
        );
      })}
    </div>
  );
};

export default Champions



Skills Component


import React from "react";
import "./Skills";


const Skills = ({ currentChampion }) => {
    return (
      <div className="spells">       
          <p className='name__Spell'> {currentChampion.textQ}</p>
          <img className='skill__Image' src={currentChampion.image1}></img>
          <h5 className='champ__Info'>{currentChampion.qInfo}</h5>    
          <p className='name__Spell' > {currentChampion.textW}</p>
          <img className='skill__Image' src={currentChampion.image2}></img>
          <h4 className='champ__Info'>{currentChampion.wInfo}</h4>
          <p className='name__Spell'> {currentChampion.textE}</p>
          <img className='skill__Image'  src={currentChampion.image3}></img>
          <h4 className='champ__Info'>{currentChampion.eInfo}</h4>
          <p className='name__Spell'> {currentChampion.textR}</p>
          <img className='skill__Image' src={currentChampion.image4}></img>
          <h4 className='champ__Info'>{currentChampion.RInfo}</h4>       
      </div>
    );
  };



  export default Skills


JSON
[
{    
"id":1,
 "name": "Aatrox",
"image": "/champions/Aatrox_0.jpg",
"textQ":"Q",
"qInfo": "The darlking Blade Aatrox slams his greatsword down, dealing physical damage. He can swing three times, each with a different area of effect",
"image1": "/spell/AatroxQ.png",          
"textW": "W",
 "wInfo": "Aatrox smashes the ground, dealing damage to the first enemy hit. Champions and large monsters have to leave the impact area quickly or they will be dragged to the center and take the damage again.",
 "image2" : "/spell/AatroxW.png",
 "textE" : "E",
 "eInfo" : " Passively, Aatrox heals when damaging enemy champions. On activation, he dashes in a direction.",
 "image3" :"/spell/AatroxE.png",
 "textR" : "R",
 "RInfo" : "Aatrox unleashes his demonic form, fearing nearby enemy minions and gaining attack damage, increased healing, and movement speed. If he gets a takedown, this effect is extended."    , 
 "image4" : "/spell/AatroxR.png"
},

    
{            
"id":2,
"name": "Ahri",
"image": "/champions/Ahri_0.jpg",
    "textQ":"Q",
    "image1": "/spell/AhriOrbofDeception.png",
    "qInfo": "Ahri sends out and pulls back her orb, dealing magic damage on the way out and true damage on the way back.",
    "image2": "/spell/AhriFoxFire.png",          
    "textW": "W",
     "wInfo": "Ahri gains a brief burst of movement speed and releases three fox-fires, that lock onto and attack nearby enemies",
     "image3": "/spell/AhriSeduce.png",
     "textE" : "E",
     "eInfo" : "Ahri blows a kiss that damages and charms an enemy it encounters, instantly stopping movement abilities and causing them to walk harmlessly towards her. The target temporarily takes increased damage from Ahri.",
     "image4": "/spell/AhriTumble.png",
     "textR" : "R",
     "RInfo" : "Ahri dashes forward and fires essence bolts, damaging nearby enemies. Spirit Rush can be cast up to three times before going on cooldown."   
},
    

Search Component

import React from 'react'

const Search=(props)=> {

 const [searchValue, setSearchValue]=React.useState('')
 const handleSearchInputChanges =(e) =>{
  setSearchValue (e.target.value)     
}  
 
return (
    <form className="search">
            <input 
            value ={searchValue} 
            onChange={handleSearchInputChanges}
            type='text'
           />       
    </form>      
    )
}

export default Search

Answer 1

一种可能的方法是过滤数组。

<div className="champions">
  {data
    .filter((postData) => currentSelectedChampion.id === postData.id)
    .map((postData) => {
      return (
        <div onClick={() => handleSelectChampion(postData.id)}>
          <div className="champion">
            <img className="champion__Image" src={postData.image}></img>
            <h4 className="champion__Name">{postData.name}</h4>

            {toggleShow && 
                (<>
                  <Skills currentChampion={currentSelectedChampion} />
                  <p onClick={() => setToggleShow(false)}>Close</p>
                </>)}
          </div>
        </div>
      );
    })}
</div>

如果您想显示所有且仅显示已筛选的版本（如果已选择），则将已筛选的数组设置为 state，并在搜索值为空时将完整的数组设置回来