如何通过api使用react-select

Question

我使用react-select作为自动搜索的下拉列表，导入库并呈现组件：

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

问题是options是来自API的数据，它是一个对象数组：

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

但是要呈现选项react-select需要使用诸如key-val这样的对象

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 -是一个带有数据的道具(从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)}
                 />