Reactjs 如何在React中循环数组？

如何使用map函数在reactjs中循环数组

shop: [
{id: 35, name: 'jumper', color: 'red', price: 20},
{id: 42, name: 'shirt', color: 'blue', price: 15},
{id: 56, name: 'pants', color: 'green', price: 25},
{id: 71, name: 'socks', color: 'black', price: 5},
{id: 72, name: 'socks', color: 'white', price: 5},]

<ul><li>[array loop]</li></ul>

商店：[
{id:35，名称：“跳线”，颜色：“红色”，价格：20}，
{id:42，名称：'衬衫'，颜色：'蓝色'，价格：15}，
{id:56，名称：'裤子'，颜色：'绿色'，价格：25}，
{id:71，名称：'socks'，颜色：'black'，价格：5}，
{id:72，名称：“袜子”，颜色：“白色”，价格：5}，]
[array loop]

您以前使用过地图功能吗？

map（）方法创建一个新数组，其结果是对调用数组中的每个元素调用提供的函数。 因此，在ES2015中将map函数引入Javascript。它大大简化了循环过程，省去了使用simply for循环或forEach函数的需要

<ul>
    {shop.map((item, key) =><li item={item} key={item.id}></li>)}
</ul>

{shop.map（（item，key）=>
）}

{shop.map（（item，index）=>
{item.name}
}

您为什么要回答自己的问题。请不要只发布代码作为答案，还要解释代码的作用以及它是如何解决问题的。带有解释的答案通常质量较高，并且更有可能吸引更多的选票。

<ul>
  {shop.map((item, index) => <li key={item.id}>{item.name}</li>}
</ul>