如何使用 JSON 数据嵌套 React 组件

Question

我正在尝试使用 JSON 数据将 4 个单独的组件映射到它们各自的行中。

您可以在此处查看应用程序 - https://stackblitz.com/edit/react-kt1zf8

数据.json

const data = {

    "lanes":[
        {
            "_uid": "001",
            "name": "Lane1",
            "type": "Toll",
                "cars":[
                  {
                      "component": "Bmw",
                      "name": "i8",
                      "number": "12345",
                  },
                  {
                      "component": "Lambo",
                      "name": "Aventador",
                      "number": "214512512",
        
                  },
            ]
        },
          {
            "_uid": "002",
            "name": "Lane2",
            "type": "Easy Pay",
                "cars":[
                  {
                      "component": "Fiat",
                      "name": "i8",
                      "number": "12345",
                  },
                  {
                      "component": "Dodge",
                      "name": "Aventador",
                      "number": "214512512",
        
                  },
            ]
        },
    ]
}

export default data

使用 JSON 中的“uid”键在它们自己的组件中呈现行。

映射行数据（车道和汽车类型）正在正确呈现。在堆栈闪电战中，您可以看到每一行中的数据都是唯一的。

但是，当我尝试映射嵌套数据时，只有第一个通道的结果在两行上都返回。

在 Components.jsx 中，我使用 data.js 中车道的唯一 id ("uid") 键来确定车道但不能弄清楚我做错了什么。为什么只有前两个结果使用相同的键时显示？

Answer 1

汽车集装箱

const CarContainer = (props) => {

  return (
    <div className="car-container">
        {props.data.cars.map(block => Components(block))}
    </div>
  );
};

export default CarContainer;

车道信息

const LaneInfo = () => {
  const [laneData, setLaneData] = React.useState(null);

  React.useEffect(() => {
    setLaneData(data.lanes);
  }, []);

  return (
    <>
      {laneData &&
        laneData.map((p) => (
          <>
            <div className="lane">
              <div className="space" key={p.uid}>
                <div>{p.name}</div>
                <div>{p.type}</div>
              </div>
            </div>
            <CarContainer data={p}/>
          </>
        ))}
    </>
  );
};
export default LaneInfo;