如何在 React 中循环遍历数组？

Question

How to loop through arrays in reactjs using map function?

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>

Answer 1

Have you used the map function before?

The map() method creates a new array with the results of calling a provided function on every element in the calling array. So the map function was introduced to Javascript in ES2015. It greatly simplifies the looping process and cuts out the need to use a simply for loop or a forEach function.

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

Answer 2

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