Form.Control <Options></Options>，如何从通过 JSON 填充的下拉列表中进行选择答案

【问题标题】：Form.Control <Options></Options>, how to select from a dropdown populated through JSONForm.Control <Options></Options>，如何从通过 JSON 填充的下拉列表中进行选择
【发布时间】：2020-06-07 13:21:23
【问题描述】：

Form.Control ，如何从 Axios Get 请求中通过 JSON 填充的下拉列表中进行选择。现在，当我尝试发送发布请求时，即使我从下拉列表中选择了 1 个项目，整个 JSON 对象也会被选中

enter code here<Form.Group as={Col} controlId="formGridServiceType">
                            <Form.Label>Service Type</Form.Label>
                            <Form.Control required 
                                //autoComplete="off"
                                as="select" 
                                name="serviceType.type"                                                                     
                                multiple={false}
                                value={this.state.serviceType.type}
                                onChange={this.serviceChange}
                                // onChange={this.change}
                                // inputRef={e1=> this.inputEl=el}
                                className={"bg-dark-text-white"} placeholder="Enter Service Type">
                                {this.state.serviceType.map((serviceType, key) => (                                        
                                        <option key={serviceType.id} value={serviceType.type}>{serviceType.type}</option>                                            
                                ))}
                            </Form.Control>
                        </Form.Group>

我的 servicechange 方法是

serviceChange = event => {
    this.setState({

        [event.target.name]: [event.target.value]
    })
}

【问题讨论】：

标签： reactjs post axios dropdown

【解决方案1】：

<Form.Control required 
                                //autoComplete="off"
                                as="select" 
                                //name="serviceType.type"   
                                name="serviceType"                                                                    
                                multiple={false}
                                //value={this.state.serviceType.type}
                                value={this.state.serviceType}
                                //value={this.serviceType}
                                onChange={this.serviceChange}
                                //onChange={this.change}
                                // inputRef={e1=> this.inputEl=el}
                                className={"bg-dark-text-white"} 
                                //placeholder="Enter Service Type"
                                >
                                {this.state.serviceType.map((serviceType, index) => (                                        
                                        <option key={index} value={serviceType.id}>{serviceType.type}</option>                                            
                                ))}
                            </Form.Control>

使用所有可能的选项多次尝试后解决了

【讨论】：