使用Reactstrap从API中填充下拉列表

Question

我已经在React上进行了这种工作，但是还不能完全算出将Reactstrap漂亮的ui应用于它的语法（为了便于阅读，我删除了一些多余的东西。]]

以下作品（但看上去很丑）：

export default class CustomModal extends Component {
constructor(props) {
    super(props);
    this.state = {
        data: [],
        activeItem: this.props.activeItem,
    validate: {
        emailState: '',
    },
    };
}



componentDidMount() {
fetch('http://localhost:8000/api/todos/')
     .then(results => results.json())
     .then(data => this.setState({ data: data })
 )}



render() {
    const { toggle, onSave } = this.props;
    const { data } = this.state;
    return (            
        <Modal isOpen={true} toggle={toggle}>
            <ModalHeader toggle={toggle}> Tool Details </ModalHeader>
            <ModalBody>
                <Form>
                    <Col md={6}>
                        <FormGroup>
                            <Label for="campus">Campus</Label>
                                {['title'].map(key => (
                                <select key={key}>
                                    {this.state.data.map(({ [key]: value }) => <option key={value}>{value}</option>)}
                                </select>
                                ))}
                        </FormGroup>

                        <FormGroup>
                        <Label for="workstream">Workstream</Label>
                        <Input
                            type="select"
                            name="workstream"
                            value={this.state.activeItem.workstream}
                            onChange={this.handleChange}
                            required
                            placeholder="Choose workstream">
                            <option default>Select workstream</option>
                            <option>Automation + Analytics</option>
                            <option>Customer Protection</option>
                        </Input>
                    </FormGroup>
这给了我以下内容：

我正在尝试像其他样式一样设置此动态下拉菜单，但不能完全弄清语法（如果您尚未注意到，我正在学习中，请轻松进行！如果有更好的方法，我也很喜欢，但到目前为止，我还是一个完整的初学者。

非常感谢！

我已经在React上进行了这种工作，但是还不能完全算出将Reactstrap漂亮的ui应用于它的语法（为了便于阅读，我删除了一些多余的东西）。以下工作（但...

Answer 1

使用与工作流选择相同的方法，除了使用.map()生成选项而不是对其进行硬编码。