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;

如果我更改，请返回以下代码，它可以正常工作。但是我想尝试对下拉菜单进行反应选择。

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'））;

反应选择下拉列表不呈现数据

2 个答案: