为什么我收到“Select.js:1555 Uncaught TypeError：无法读取未定义的属性‘isSelectOptGroup’”

Question

I am new to react and I am trying to show dynamic values in the dropdown by fetching from the dummy api . But I am getting error with select.js and my web page is displayed blank.

  class Test extends React.Component
    {
       constructor(props) {
       super(props);
       this.state = {  
                      dropdown:[]
                    };
       this.getJSONdata=this.getJSONdata.bind(this);
    }
         componentWillMount() {
          this.getJSONdata();
        }
       getJSONdata()
        {
          var temp=[];
          fetch('http://dummy.restapiexample.com/api/v1/employees')
          .then((response) => {
            return response.json();
          })
          .then((myJSON)=>
          {
            console.log(JSON.stringify(myJSON));
            for(let i = 0; i<15;i++)
            {
            var data = myJSON[i];
            var joined = {value:data.employee_name};
            temp.push(joined);
            }
            console.log("obtained jSON data" +  JSON.stringify(temp));
            this.setState({
              dropdown:temp});

            });
          }
        render()
         {
            return (
                  <select
                   id =  "test"  
                   options={this.state.dropdown}
                 </Select>
            );
    }

export default Test;

On running I am getting error:

Uncaught TypeError: Cannot read property 'isSelectOptGroup' of undefined

Where I am going wrong? Could anyone please help me with this issue.

Answer 1

Its late but I hope it helps,If you are using AntD

You have written your select component wrong. Ant Design select doesn't have options props. change your code to this.

       <Select
         value={this.state.yourValue}
          onSelect={this.onValueSelected}>
          {
            this.state.dropdown.map((item: any, index: number) => {
                return <Option key={index} value={item.value}>
                             {item.label}
                                 </Option> })
             }
        </Select>

And if you write anything else between <Select> </Select> you will get the same error