react-select 将选项字段的名称从 ({ value: '', label:''}) 更改为 ({ id: '', name:''})

Question

有没有办法更改选项对象的字段？

从我的 BE API 我得到：

const items = [{ id: 1, name:'dropdown1'}, { id: 2, name:'dropdown2'}];

所以现在我必须将字段重新映射到 value 和 label，如果我可以动态设置这些字段就好了，可能是这样的：

    <Select
      optionRemapping={{value: 'id', label: 'name'}}
      options={items}
    />

或者我错过了人们如何做这件事的模式？

做下面感觉有点不对。

items.map((item) => {
  return { value: item.id, label: item.name };
});

Answer 1

使用 getOptionLabel 和 getOptionValue 道具。

<Select
  getOptionLabel={option => option.name}
  getOptionValue={option => option.id}
  options={items}
/>

Answer 2

您可以通过执行以下操作并解构您的项目来实现映射：

<Select
    options={items.map(({ id, name }) => ({ value: id, label: name}))}
/>

react-select change name of option fields from ({ value: '', label:''}) to ({ id: '', name:''})