JSON 反应数组

Question

我有点卡住了，我有一个包含数组的 JSON 文件，所以我想当我点击 div 时只打开一个“数组”而不是打开它们，基本上我想在它们之间切换。如果您能帮助我，我将不胜感激。在此先感谢。编辑 我在 json 文件中有更多数组，现在它会双重渲染它们

[
{

"id":0,
 "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"
}

]

import React  from 'react'
import data from './data.json'
import  './Champions.css'

function Champions() {
  const[toggleShow, setToggleShow]= React.useState(false) 
      
    return (
       <div className='champions'>
       {data.map((postData)=>{
        console.log(postData);
         return(      
           <div onClick={()=> setToggleShow((toggleShow) =>!toggleShow)}key= 
           {postData.id}>
          <div className='champion'>       
         <img className='champion__Image'src={postData.image}></img>                   
          <h4 className="champion__Name">{postData.name}</h4>  
          
           {!toggleShow && 
            <Skills/>}
          </div>
         
          </div>
       )

Skills Component
import React from 'react';
import "./Skills.css";
import data from './data.json'

function Skills () {
             
    return (       
            <div className="spells">
        {data.map((postData)=>{
            console.log(postData)       
            return(
                <div>                 
                   <img alt="123"className='image__Q'src={postData.image1}></img>
                    <p>{postData.textQ}</p>
                    <h4>{postData.qInfo}</h4>
                   <img alt="123"className='image__Q'src={postData.image2}></img>
                    <p>{postData.textW}</p>
                    <h4>{postData.wInfo}</h4>
                    <p>{postData.textE}</p>
                    <h4>{postData.eInfo}</h4>
                    <p>{postData.textR}</p>
                    <h4>{postData.RInfo}</h4>
                   
                    </div>     
  )
  
   })}
   </div>
        
    )
}

export default Skills

Answer 1

如果我理解得很好，你会在 JSON 中有很多对象，而你只想得到一个对象？

如果是这样，这将起作用

import ReactDOM from "react-dom";
import React, { useState } from "react";
import "./styles.css";
import data from "./data.json";

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>
  );
};

const Skills = ({ currentChampion }) => {
  return (
    <div className="spells">
      <div>
        <h1>{currentChampion.name}</h1>
        <p> {currentChampion.textQ}</p>
        <h4>{currentChampion.qInfo}</h4>
        <p> {currentChampion.textW}</p>
        <h4>{currentChampion.wInfo}</h4>
        <p> {currentChampion.textE}</p>
        <h4>{currentChampion.eInfo}</h4>
        <p> {currentChampion.textR}</p>
        <h4>{currentChampion.RInfo}</h4>
      </div>
    </div>
  );
};

ReactDOM.render(<Champions />, document.getElementById("root"));

但是，我建议您重构架构并将技能和英雄封装在一个主要组件中，并将当前英雄直接传递给他们每个人。因此，您只需过滤一次数据。 密码箱链接在这里：https://codesandbox.io/s/heuristic-blackwell-sqybi?file=/src/App.js:0-960

图片结果：