React-select 下拉列表不呈现数据

Question

我正在尝试使用 react-select 进行下拉。 console.log我的subjectList数组显示为 [object object],[object,object]... 如果我不使用react-select ，我的下拉列表呈现良好。 我不知道问题是什么。 下面是我的代码：

import React, {Component} from 'react';
import axios from 'axios';
import Select from 'react-select';


class Subject extends Component{
    state={subjectList:[]};
    componentDidMount(){
        this.getSubjects();
    }
   //get distinct subject
   getSubjects= ()=>{

    axios.get('/apiURL')
    .then(response=>{

        const subjects= response.data;
       //remove duplicates
        const subjectList = [...new Map(subjects.map(item => [item["SUBJECT"], item])).values()];

        this.setState({subjectList: subjectList});


      });  

    };

    render(){

    let subjectList=this.state.subjectList.map((item,i) => <option key={i} value={item.SUBJECT}>{item.CATEGORY}</option>);

        return(
            <Select  options={subjectList} />
        );
    }

 }


  export default Subject;

如果我更改返回到下面的代码，它工作正常。 但我想为我的下拉列表尝试 react-select。

return (
    <div>
    <select>
        <option value=''>Select a subject</option>

        {this.state.subjectList.map((item,indx)=><option key={indx} value={item.SUBJECT}>{item.CATEGORY}</option>)}

    </select>

    </div>
);

Answer 1

从react-select文档中阅读使用部分： https : //github.com/JedWatson/react-select#installation-and-usage

在你的情况下，渲染中的subjectList应该是一个带有 'value' 和 'label' 键的对象数组，而不是<option>元素。 所以像：

let subjectList = this.state.subjectList.map(item => ({value: item.SUBJECT, label: item.CATEGORY}));

Answer 2

您可以用于刷新

_defer(() => $(this.selectRef).selectpicker('refresh'));