React-Select 不显示选项答案

【问题标题】：React-Select not showing optionsReact-Select 不显示选项
【发布时间】：2020-08-18 20:48:02
【问题描述】：

我正在尝试在我的表单中实现 react-select，但选项未显示。如果我检查选择组件，则选项道具已填充，但未显示选项。

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

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>

【问题讨论】：

请发布系统的价值是什么

标签： reactjs react-select

【解决方案1】：

确保您的选项类型正确 - 来自docs的示例

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

类型必须是Array<{value:string,label:string}>

【讨论】：

谢谢 - 我只是以为它在寻找一个对象，我没有意识到对象中的项目必须有特定的键
labelKey 和 valueKey 可以更改，您需要将其作为道具传递以选择组件。
@ANILPATEL 你能告诉我该怎么做吗？请
@AgentK 我已经写了一个详尽的答案，希望对您有所帮助。

【解决方案2】：

在反应选择 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() {
    //suppose you want name as label and id as value
    return (
      <Select
        options={options}
        getOptionLabel={(options) => options['name']}
        getOptionValue={(options) => options['id']}
      />
    );
  }
}

【讨论】：