如何更改数组中对象的属性名称？

Question

我正在使用这个反应选择https://github.com/JedWatson/react-select

他们正在使用

const options = [
    { value: 'chocolate', label: 'Chocolate' },
    { value: 'strawberry', label: 'Strawberry'},
    { value: 'vanilla', label: 'Vanilla' }
];

我的阵列设置如下不同

const columns = [
    { name: 'OrderNumber', title: 'Order Number' },
    { name: 'strawberry', title: 'Strawberry' },
    { name: 'vanilla', title: 'Vanilla' }
]

我无法改变我的阵列.我尝试使用'name'但select-react具有相同的名称props'name'.如果我将"名称"更改为"值",则会填充选择选项.但是我不想这样做.

任何人都可以教我如何通过编码将数组的"名称"更改为"值"？不是手动;)

Answer 1

如果您只想将name属性重命名为，value您可以使用 amap并将name属性销毁为value并选择其余部分。

const columns = [
    { name: 'OrderNumber', title: 'Order Number' },
    { name: 'strawberry', title: 'Strawberry' },
    { name: 'vanilla', title: 'Vanilla' }
];

const newColumns = columns.map( item => {
  const { name: value, ...rest } = item;
  return { value, ...rest }
 }
);

console.log( newColumns );

但是，我怀疑您会想要这个，因为react-select（据我所知）不适用于title. label我猜它在等待道具。如果是这样，请按照@Dacre Denny 的建议更改所有属性。我喜欢箭头函数 :) 所以：

const newColumns = columns.map( item =>
  ( { value: item.name, label: item.title } )
);

Answer 2

您可以使用该.map()函数使数据columns适合使用react-select.

该.map()功能在该Array类型上可用.它从您调用它的数组创建一个新数组,并允许您提供一个函数,该函数在从原始数组复制时转换/更改每个项目.

您可以按如下方式使用它:

const columns = [
    { name: 'OrderNumber', title: 'Order Number' },
    { name: 'strawberry', title: 'Strawberry' },
    { name: 'vanilla', title: 'Vanilla' }
]

const options = columns.map(function(row) {

   // This function defines the "mapping behaviour". name and title 
   // data from each "row" from your columns array is mapped to a 
   // corresponding item in the new "options" array

   return { value : row.name, label : row.title }
})

/*
options will now contain this:
[
    { value: 'OrderNumber', label: 'Order Number' },
    { value: 'strawberry', label: 'Strawberry' },
    { value: 'vanilla', label: 'Vanilla' }
];
*/

有关更多信息,请参阅MDN文档.map()