javascript - 如何使用 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”键在其自己的组件中呈现。

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

但是，当我尝试映射嵌套数据时，两行上仅返回第一 channel 的结果。

在Components.jsx中，我使用data.js中 channel 的唯一id(“uid”)键来确定 channel ，但无法弄清楚我做错了什么。为什么使用相同 key 时只显示前两个结果？

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;