反应选择将选项字段的名称从（{值：``，标签：''}）更改为（{id：``，名称：''}）

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

使用getOptionValue和<Select getOptionLabel={option => option.name} getOptionValue={option => option.id} options={items} /> 道具。

background-image: url('{{ Storage::url($post->image) }}');

background-image: url('{{ Storage::url("{$post->image}") }}');

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

Answer 2

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

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