Question

我有一个帐户列表，每个帐户都有大量的属性。我需要将仅包含两个字段的数组的精简版本发送给方法。我必须将一个名为options的属性传递给我的SelectInput组件，该组件具有ID和值的列表，这些ID和值的列表会在下拉菜单中呈现。

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

但是我得到了：

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

映射正确的东西在这里使用，如果是，我在做什么错了？

Answer 1

map是对的，是的。问题是new关键字。使用对象文字创建对象时，请勿使用new。另一个问题是您的arrow函数没有返回值。同时解决这两个问题，只需将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}))
    }
/>

Answer 2

您无需在地图回调中使用new。

尝试一下：

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

Answer 3

相反，

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

执行此操作

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

Answer 4

将新替换为返回，这应该引起注意。因此，地图回调应该返回带有新值的值，而不是返回导致错误消息的值

另一个建议而不是组件中的内联代码来转换数据，请尝试将其提取并使用，这确实有助于简化代码的读取和维护

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

React / Javascript Map函数-返回数组

4 个答案: