以下代码在react.js中不起作用

Question

    const robots = [
  {
    id: 1,
      name: 'Leanne Graham',
      username: 'Bret',

  },
  {
    id: 2,
    name: 'Ervin Howell',
    username: 'Antonette',

  },
  {
    id: 3,
    name: 'Clementine Bauch',
    username: 'Samantha',

  },
  {
    id: 4,
    name: 'Patricia Lebsack',
    username: 'Karianne',

  },
  {
    id: 5,
    name: 'Chelsey Dietrich',
    username: 'Kamren',

   },
   {
    id: 6,
    name: 'Mrs. Dennis Schulist',
    username: 'Leopoldo_Corkery',

  },
  {
    id: 7,
    name: 'Kurtis Weissnat',
    username: 'Elwyn.Skiles',

  },
  {
    id: 8,
     name: 'Nicholas Runolfsdottir V',
    username: 'Maxime_Nienow',

  },
  {
    id: 9,
    name: 'Glenna Reichert',
    username: 'Delphine',

  },
  {
    id: 10,
    name: 'Clementina DuBuque',
    username: 'Moriah.Stanton',

  }
];



let cardComp = robots.forEach((element,index)=> {
        return (<Card  id = {robots[index].id} Name = {robots[index].name}
        user ={robots[index].username} mail = {robots[index].email}/>)
      });

以下代码在react.js中不起作用 但是，当我用地图替换forEach循环时，相同的代码也可以正常工作。 为什么它不适用于forEach循环？ 当我尝试使用普通的javascript从对象数组中获取值时，它工作得很好，并且我能够获取数组中的所有值。 但这在带有forEach循环的react.js中不起作用。

Answer 1

let cardComp = robots.forEach((element,index)=> {
        return (<Card  id = {robots[index].id} Name = {robots[index].name}
        user ={robots[index].username} mail = {robots[index].email}/>)
      });

JavaScript中的

forEach不返回任何内容

代替使用返回新数组的映射

let cardComp = robots.map((element) => {
      return (<Card id={element.id} Name={element.name} user={element.username} mail={element.email}/>)
    });

请参阅MDN关于forEach的原型信息

和map

var new_array = arr.map(function callback(currentValue[, index[, array]]) {
    // Return element for new_array
}[, thisArg])