如何从现有数组创建含新属性的新数组以适配React组件

你的代码有两个关键问题导致报错：

• 没必要用push+map：map方法本身就会返回一个全新的数组，直接把这个返回值赋值给newItems就行，不用先创建空数组再往里推。
• 箭头函数返回对象的语法错误：当箭头函数要直接返回对象字面量时，必须用()把对象包裹起来。如果不加括号，JS会把{}当成函数体，里面的id: message.messageId会被解析成标签语句（不是对象属性），这就是你看到报错的原因。

正确写法1（简洁版） #

const newItems = messages.map(message => ({
  id: message.messageId,
  name: message.messageName
}));

正确写法2（显式return，更直观） #

如果怕记混括号的用法，也可以在函数体里显式写return：

const newItems = messages.map(message => {
  return {
    id: message.messageId,
    name: message.messageName
  };
});

这样处理后，newItems就是每个元素都包含id和name属性的数组，完全符合React组件的要求。

内容的提问来源于stack exchange，提问作者floormind