javascript - 将接收到的数据对象显示为下拉列表 React Axios

Question

我是新手，我正在设计一个下拉菜单，它使用 axios 从 API 接收其信息：

axios.get('/api/jobs/list-tags',{headers:headers}).then(respo =>{
      console.log(respo.data)
      this.setState({tagsList:respo.data})
    })

这是数据的形状：

Object { id: 1, name: "MongoDB" }
Object { id: 2, name: "JavaScript" }

我想使用 react-select 在下拉列表中显示这些数据：

<Select placeholder='Select from pre-created Tags 'onChange={handleDropDown('Tags')} defaultValue={values.Tags} required options={this.state.tagsList} />

但这不会在下拉列表中显示任何项目，仅显示空白框。我怎样才能真正在列表项中连续显示数据？比如：JavaScript，...

标签： javascriptreactjsaxios

Answer 1

你可以这样做

   <Select
  placeholder="Select from pre-created Tags "
  onChange={e => handleDropDown(e.target.value)}
  required
  value={this.state.tag}
>
  <options  value=''>Select</options>
  {this.state.tagsList.map(tags => (
    <options key={tags.id} value={tags.name}>
      {tags.name}
    </options>
  ))}
</Select>;

和handleDropDown类似的功能

  handleDropDown = tag => {
  this.setState({ tag });
};