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

Question

我有一个映射列表，其中包含另一个也已映射的组件。 (https://stackblitz.com/edit/rowmaptest?embed=1&file=LaneInfo.jsx) 我想要做的是切换单行以显示来自子组件的数据。

LaneInfo.jsx

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

const LaneInfo = () => {
  const laneData = data.lanes;
  const [showLanes, setShowLanes] = useState(false);

  return (
    <>
      {laneData.map(lane => (
        <>
          <div className="lane" onClick={() => setShowLanes(!showLanes)}>
            <div className="space" key={lane.name}>
              <div>{lane.name}</div>
              <div>{lane.type}</div>
            </div>
          </div>

           {showLanes && <CarContainer data={lane.cars} />}
        </>
      ))}
    </>
  );
};
export default LaneInfo;

使用onClick函数，其目的是隐藏被点击的div。

但是，正如您在我的演示中看到的那样，当我单击该行时，两个项目都会打开或关闭。

我认为这需要我从 Data.js 获取行的唯一 id，因为这是我在 中映射行的方式，但我还无法弄清楚。

Answer 1

您可能最好创建一个单独的 Lane 组件并让它管理自己的状态:

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;