如何在 JSX 中循环尝试数据

Question

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

中显示 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>);
}

Answer 2

您可以在渲染方法中使用 map 执行类似的操作。

render(){
  return <ul>
         {data.map(item => <li key={item.ProductTypeID}>{item.ProductTypeID}</li>)}
         </ul>
}

如何在 JSX 中循环尝试数据

How to loop try data in JSX

javascript

jsx

ecmascript-6

reactjs