如何从 react-select multi select 中删除 null 选定值

Question

I have been trying to set up react-select but when I enable isMulti there is always two selected blank values in the selection box.

I have tried setting default values, using state to control the Select but it keeps showing these two blank values when I load the page. Here are some code snippets of the things I have tried:

<Select
    isMulti
/>

<Select
    isMulti
    defaultValue={[]}
/>

<Select
    isMulti
    options={majors().map((element: any) => {
                return { value: element[2], label: element[2] }
             })}
/>

<Select
    isMulti
    defaultValue={[]}
    options={majors().map((element: any) => {
                return { value: element[2], label: element[2] }
             })}
/>

interface Option {
  value: String,
  label: String
}

let def : Option[] = []

<Select
    isMulti
    defaultValue={def}
    options={majors().map((element: any) => {
                return { value: element[2], label: element[2] }
             })}
/>

Answer 1

Not entirely sure the reason for this, but what ended up fixing the problem was wrapping the <Select> inside of a <div> .

This did the trick:

<div>
<Select
    isMulti
    defaultValue={[]}
    options={majors().map((element: any) => {
                return { value: element[2], label: element[2] }
             })}
/>
</div>