React / JavaScript的map函数 - 返回数组

Question

我有一个账户列表，每个账户上有很多属性。我需要发送一个缩减版本，只包含两个字段的数组，到一个方法中。我必须传递一个称为 options 的属性给我的 SelectInput 组件，它具有 id 和 value 列表，最终呈现为下拉菜单。

<SelectInput 
    options={
       this.value.allAccountsList
          .map((item, index) => {
                          new { 
                            id: item.Id,
                            value: item.name
                          }
                      })  
                    }/>

但我得到了以下错误:

期望的是一个赋值或函数调用，却看到了一个表达式

在这里使用map是正确的吗？如果是，那么我做错了什么？

- Craig

---

在这个需求中使用map是正确的，唯一的问题是将new与return一起删除。var newData = this.value.allAccountsList.map((item, index) => { return {id: item.Id, value: item.name} }) - Puneet Bhandari

Answer 1

map 是正确的方法，没错。问题在于使用了 new 关键字来创建对象字面量，这是不正确的。另一个问题是你的箭头函数没有返回值。要修复这两个问题，只需将 new 改为 return：

<SelectInput 
    options={
        this.value.allAccountsList
        .map((item, index) => {
            return { 
                id: item.Id,
                value: item.name
            };
        })  
    }
/>

你也可以使用箭头函数的简洁形式，只需在对象字面量周围使用()。 如果我们还删除index参数（因为它未被使用）：

<SelectInput 
    options={
        this.value.allAccountsList.map(i => ({id: i.Id, value: i.name}))
    }
/>

- T.J. Crowder

Answer 2

你不需要在 map 回调函数中使用 new。

试试这个：

<SelectInput 
    options={
       this.value.allAccountsList
          .map((item, index) => ({
                            id: item.Id,
                            value: item.name
                      }))  
                    }/>

- Ponpon32

Answer 3

不要这样做，

new { 
   id: item.Id,
   value: item.name
}

做这个，

return { 
 id: item.Id,
 value: item.name
}

- ravibagul91

Answer 4

将new替换为return，这样就可以解决问题了。所以map回调函数应该返回带有new的值，否则你没有返回值，这会导致错误信息。

还有一个建议，不要在组件中使用内联代码来转换数据，尝试将其提取出来并使用它，这真的有助于简化代码的阅读和维护。

<SelectInput 
    options={
       this.value.allAccountsList
          .map((item, index) => {
                          return { 
                            id: item.Id,
                            value: item.name
                          }
                      })  
                    }/>

- Anil Namde