Reactjs 使用for each在另一个组件中创建react组件

假设我有一些汽车列表的数据，我想使用定义为“VehicleListing”的react组件来表示这些列表对象中的每一个。我想在另一个名为“VehicleTypes”的react组件中呈现每个列表

下面我尝试使用forEach方法来实现这一点，但由于某些原因，forEach方法不会在DOM上呈现任何内容。有人知道为什么吗？此外，是否有更好的方法来完成同样的任务

谢谢大家!

let Cars = [
  { year: 2013, model: "A", price: "$32000" },
  { year: 2011, model: "B", price: "$4400" },
  { year: 2016, model: "B", price: "$15500" },
];

function VehicleListing(props) {
  return (
    <ul>
      <table>
        <tr>
          <th>Year</th>
          <th>Model</th>
          <th>Price</th>
          <th>Buy</th>
        </tr>
        <tr>
          <td>{props.data.year}</td>
          <td>{props.data.model}</td>
          <td>{props.data.price}</td>
          <td>
            <button>Buy Now</button>
          </td>
        </tr>
      </table>
    </ul>
  );
}

function VehicleTypes(props) {
  return (
    <div>
      <h2>{props.vehicleType}</h2>

      {Cars.forEach((listing) => {
        return <VehicleListing data={listing} />;
      })}
    </div>
  );
}

function ReactTransportationApp(props) {
  return (
    <div>
      <PageTitle />
      <ChooseOptions />
      <VehicleTypes vehicleType="Cars" />
    </div>
  );
}

let Cars=[
{年份：2013，型号：“A”，价格：$32000}，
{年份：2011，型号：“B”，价格：$4400}，
{年份：2016，型号：“B”，价格：$15500}，
];
功能车辆列表（道具）{
返回(

年
模型
价格
购买
{props.data.year}
{props.data.model}
{props.data.price}
立即购买

);
}
功能车辆类型（道具）{
返回(
{props.vehicleType}
{Cars.forEach（（列表）=>{
返回；
})}
);
}
功能ReactTransportationApp（道具）{
返回(
);
}

数组。forEach

只返回

未定义的

，因此在这里没有任何用处。发件人：

forEach（）为每个数组元素执行一次回调函数； 与map（）或reduce（）不同，它总是返回未定义的值，并且 不可链接。典型的用例是在最短的时间内执行副作用 链条的末端

您需要使用：

功能车辆类型（道具）{
返回(
{props.vehicleType}
{Cars.map（（列表）=>{
返回；
})}
);
}

。。。如果删除大括号，甚至不需要显式返回语句，因此可以更简洁地编写它：

function VehicleTypes(props) {
      return (
        <div>
          <h2>{props.vehicleType}</h2>

          {Cars.map(listing => 
             <VehicleListing data={listing} />;
          )}
        </div>
      );
    }

功能车辆类型（道具）{
返回(
{props.vehicleType}
{Cars.map（清单=>
;
)}
);
}

数组。forEach

只返回

未定义的

，因此在这里没有任何用处。发件人：

forEach（）为每个数组元素执行一次回调函数； 与map（）或reduce（）不同，它总是返回未定义的值，并且 不可链接。典型的用例是在最短的时间内执行副作用 链条的末端

您需要使用：

功能车辆类型（道具）{
返回(
{props.vehicleType}
{Cars.map（（列表）=>{
返回；
})}
);
}

。。。如果删除大括号，甚至不需要显式返回语句，因此可以更简洁地编写它：

function VehicleTypes(props) {
      return (
        <div>
          <h2>{props.vehicleType}</h2>

          {Cars.map(listing => 
             <VehicleListing data={listing} />;
          )}
        </div>
      );
    }

功能车辆类型（道具）{
返回(
{props.vehicleType}
{Cars.map（清单=>
;
)}
);
}