反应选择不显示选项

问题描述

我正在尝试在我的表单中实现react-select，但是选项没有显示。如果我检查选择组件，则会填充选项属性，但不会显示选项。

我尝试了一个字符串数组和一个对象数组。即使两者都显示在选项props中，它们都不会在下拉列表中显示信息。

const systems = [
"SystemName/12345/1","SytemName1/7890/2","SystemName2/65432/3"
]

我也尝试过：

const systems = 
[{systemName: 'SystemName1",altId:12345,systemId: 1},{systemName: 'SystemName2",altId:7890,systemId: 2},{systemName: 'SystemName3",altId:65432,systemId: 3}]

 <form className="page-form" onSubmit={handleSubmit(this.onSubmit)}>
                    <Row>
                        <Col>
                            <Label label="Water System" htmlFor="systemId" required />
                            <Select
                                options={systems}
                                isSearchable={true}
                                name="systemId"
                                value="systemId"
                                placeholder="Select System"
                            />
....
</form>

解决方法

在 react-select v1 中

<Select
   labelKey=labelKey
   valueKey=valueKey
/>

在 react-select v2 之后

<Select
   getOptionLabel={options => options[labelKey]}
   getOptionValue={options => options[valueKey]}
/>

例如：

/* React-Select v2 */

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

/* Here name is the labelKey and id is the valueKey */
const options = [
  { id: 'value1',name: 'label1'},{ id: 'value2',name: 'label2'},{ id: 'value3',name: 'label3'},]

export default class ReactSingleSelect extends Component {
  render() {
    return (
      <Select
        options={options}
        getOptionLabel={({ name }) => name}
        getOptionValue={({ id }) => id}
      />
    );
  }
}

确保您选择的选项类型正确- docs

中的示例

-1

必须为const options = [ { value: 'chocolate',label: 'Chocolate' },{ value: 'strawberry',label: 'Strawberry' },{ value: 'vanilla',label: 'Vanilla' } ]

类型

react-select reactjs reactjs