javascript - 如何通过 api 使用 react 选择

Question

我使用react-select作为自动搜索的下拉菜单 导入库和渲染组件:

<Select
              className='search-line'
              placeholder='Search...'
              options={dataList}
              onChange={opt => console.log(opt)}
                 />

问题是选项是来自 API 的对象数组数据:

const data = [
  { id: 1,
    name: 'Bmw'
  },
  { id: 2,
    name: 'Ferrary'
      }
]

但是要渲染选项，react-select 需要具有如下 key-val 的 objs

const options = [
    { value: name, label: name}
]

如何循环遍历我的数组并更改该值和标签 obj key-val ？

这可行，但它会分割我从 API 获取的对象数组中的所有名称:

   const name  = data.map(i => {
     return i.name
   })

  const dataList = [
    { label: name, label: name}
  ]

Data - 是一个带有数据的 prop(从 API 获取的对象数组)

Answer 1

你可以使用

const options = data.map(item => {
    return {
        label: item.name,
        value: item.id     
    }
}

console.log(options) // [{ label: 'Bmw', value: 1}, { label: 'Ferrary', value: 2 }]


<Select
              className='search-line'
              placeholder='Search...'
              options={options}
              onChange={opt => console.log(opt)}
                 />