Javascript 使用useState打开数组中的单个元素

我有一个映射列表，其中包含另一个也映射的组件。 我要做的是切换一行以显示子组件中的数据

LaneInfo.jsx 使用onClick函数，可以隐藏已单击的div

但是，正如您在我的演示中看到的，当我单击行时，两个项目要么打开，要么关闭

---

我认为这需要我从Data.js中获取行的唯一id，因为这是我映射行的方式，但我还没有弄清楚。您最好创建一个单独的车道组件，让它管理自己的状态：

import React, { useState, useEffect } from "react";
import data from "./data.js";
import CarContainer from "./CarContainer";

const Lane = ({
  lane
}) => {
  const [showLane, setShowLane] = useState(false);

  return (
    <>
      <div className="lane" onClick={() => setShowLane(!showLane)}>
        <div className="space" key={lane.name}>
          <div>{lane.name}</div>
          <div>{lane.type}</div>
        </div>
      </div>
      {showLane && <CarContainer data={lane.cars} />}
    </>
  );
};

const LaneInfo = () => {
  const laneData = data.lanes;

  return (
    <>
      {laneData.map(lane => (
        <Lane lane={lane} />
      ))}
    </>
  );
};
export default LaneInfo;

---

谢谢你这么简单的解决方案。我在网上看到了一些其他的答案，但它们让问题变得比这复杂得多。没问题。最好保持组件尽可能小，这样在很多时候，这些问题就会消失

import React, { useState, useEffect } from "react";
import data from "./data.js";
import CarContainer from "./CarContainer";

const Lane = ({
  lane
}) => {
  const [showLane, setShowLane] = useState(false);

  return (
    <>
      <div className="lane" onClick={() => setShowLane(!showLane)}>
        <div className="space" key={lane.name}>
          <div>{lane.name}</div>
          <div>{lane.type}</div>
        </div>
      </div>
      {showLane && <CarContainer data={lane.cars} />}
    </>
  );
};

const LaneInfo = () => {
  const laneData = data.lanes;

  return (
    <>
      {laneData.map(lane => (
        <Lane lane={lane} />
      ))}
    </>
  );
};
export default LaneInfo;