Javascript JSON反应数组

我有点卡住了，我有一个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"
}

]

从“React”导入React
从“./data.json”导入数据
导入“./Champions.css”
函数（）{
常量[toggleShow，setToggleShow]=React.useState（false）
返回(
{data.map（（postData）=>{
console.log（postData）；
报税表（
setToggleShow（（toggleShow）=>！toggleShow）}键=
{postData.id}>
{postData.name}
{！切换显示&&
}
)
技能部分
从“React”导入React；
导入“/Skills.css”；
从“./data.json”导入数据
功能技能（）{
报税表（
{data.map（（postData）=>{
console.log（postData）
返回(
{postData.textQ}

{postData.qInfo}
{postData.textW}

{postData.wInfo}
{postData.textE}

{postData.eInfo}
{postData.textR}

{postData.RInfo}
)
})}
)
}
导出默认技能

如果我理解得很好，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"));

从“react-dom”导入ReactDOM；
从“React”导入React，{useState}；
导入“/styles.css”；
从“/data.json”导入数据；
康斯特冠军=（）=>{
const[toggleShow，setToggleShow]=useState（false）；
const[currentSelectedChampion，setCurrentSelectedChampion]=useState（{}）；
const handleSelectChampion=（id）=>{
如果（！toggleShow）设置toggleShow（true）；
const currentChampion=data.filter（（champ）=>champ.id==id）[0]；
setCurrentSelectedChampion（currentChampion）；
};
返回(
{data.map（（postData）=>{
返回(
handleSelectChampion（postData.id）}>
{postData.name}
{toggleShow&¤tSelectedChampion.id==postData.id&&(
setToggleShow（false）}>Close
)}
);
})}
);
};
常量技能=（{currentChampion}）=>{
返回(
{currentChampion.name}
{currentChampion.textQ}

{currentChampion.qInfo}
{currentChampion.textW}

{currentChampion.wInfo}
{currentChampion.textE}

{currentChampion.eInfo}
{currentChampion.textR}

{currentChampion.RInfo}
);
};
render（，document.getElementById（“根”））；

但是，我建议您重构您的体系结构和wrapp技能，并将当前的冠军直接传递给他们中的每一个。因此，您只需过滤一次数据。 codesandbox链接位于此处：

---

图像结果：

将每个组件放到另一个组件中，然后每个组件都会有自己的状态。React的诀窍是，不要创建巨大的单个组件，而是从许多较小的组件中组合它们。这样做，一切都会变得容易得多。第一个是这样做的吗time@Keith没用你就是这么做的，告诉我们你第一次尝试是你这样做，然后我们就可以看到你是否出错了。@Keith这里是你想要的，当我点击特定的champ时，它只显示关于该champ的信息是的。但是你放在顶部的json文件只显示数组中的一个对象。你的意思是数组中通常有多个对象，你想要得到单个对象c关于champ？如果是这样，我的答案是正确的，你只需要按名称、id或从中获得的任何值进行过滤。它们是数组中的多个对象，我想当我单击打开champ信息的特定图像时，我已经更新了代码，它工作得很好，我还添加了一些重构，请我不知道你是否有错误或验证答案，如果它适合你，完整的代码在代码框中顺便说一句，这是在我点击img时发生的事情之前

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