javascript - 如何在 JSX 中循环尝试数据

Question

您好，我想在 UI 中显示这些数据。 我希望能够循环尝试数据并在 li 中显示 ProductTypeID 和 ProductTypeName

我希望能够在 jsx 中循环

我实在是想不通，你们能给我一点提示吗？我不太擅长处理数据和循环它。

[{
  "ProductTypeID": 14,
  "ProductTypeName": "ItemName1",
  "ProductTypeImageUrl": "",
  "ProductTypeThumbUrl": "",
  "ProductTypeIconUrl": "",
  "IsActive": 1,
  "ProductTypeBlueImage": null,
  "Is3HourRent": null
}, {
  "ProductTypeID": 1,
  "ProductTypeName": ItemName2",
  "ProductTypeImageUrl": "",
  "ProductTypeThumbUrl": "",
  "ProductTypeIconUrl": "",
  "IsActive": 1,
  "ProductTypeBlueImage": null,
  "Is3HourRent": false
}, {
  "ProductTypeID": 10,
  "ProductTypeName": "ItemName3",
  "ProductTypeImageUrl": "",
  "ProductTypeThumbUrl": "",
  "ProductTypeIconUrl": "",
  "IsActive": 1,
  "ProductTypeBlueImage": null,
  "Is3HourRent": true
}]

Answer 1

render() {
 var data = [{
  'ProductTypeID': 14,
  'ProductTypeName': 'ItemName1'
 }, 
 {
  'ProductTypeID': 15,
  'ProductTypeName': 'ItemName2'
 }];

 return (<ul>
  {data.map((item) => {
   return (<li key={item.ProductTypeID}>
     <span>ID: {item.ProductTypeID}</span>
     <span>Name: {item.ProductTypeName}</span>
   </li>);
  })}
 </ul>);
}