在 React 中，如何使用“map”将对象数组转换为新的对象数组？答案

【问题标题】：In React, how can I use "map" to transform an array of objects into a new array of objects?在 React 中，如何使用“map”将对象数组转换为新的对象数组？
【发布时间】：2020-05-27 16:53:53
【问题描述】：

我有一个关于我的 React 16.10.0 的简单问题。如何将我的数组转换为另一个对象数组？我有一组具有属性的对象

id
name

我想将该数组转换为另一个具有属性的数组

id
text

所以我尝试了

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
     
    const tags = props.values.map(result => 
      {
        id: result.id,
        text: result.name
      });

但编译器抱怨“;”预计在“文本：”行上。

【问题讨论】：

我想你只是错过了 map 函数中的返回

标签： javascript arrays reactjs function transform

【解决方案1】：

Javascript 将{ ... } 解释为代码块而不是对象文字。一个简单的解决方法是在对象周围添加括号，如下所示：

class MyComponent extends React.Component {
    constructor(props) {
        super(props);

        const tags = props.values.map(result => 
            ({
                id: result.id,
                text: result.name
            }));

【讨论】：

【解决方案2】：

我认为您混淆了，因为在返回对象时隐含的 return 不起作用。

从箭头函数返回有两种方式：

显式返回（块体）

() => {
  return 'something';
}

或隐式返回（简洁的正文）

() => 'something';
() => ('something')

您正在尝试使用隐式返回，但您正在返回一个对象，因此语法与您的预期冲突。

result => 
{
  id: result.id,
  text: result.name
});

这不是一个对象，而是一个函数体。函数体是导致错误的无效语法。

您可以通过使用括号或手动返回来解决此问题：

result => 
({
  id: result.id,
  text: result.name
};

result => {
  return {
    id: result.id,
    text: result.name
}};

供参考：查看arrow functions 的文档中的“返回对象文字”部分，

【讨论】：