reactjs - React-Select 不显示选项

Question

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

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

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>

Answer 1

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

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

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