reactjs - 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}
/>

示例:https://codesandbox.io/s/kmoyw8q667