从数据库中检索值以蚂蚁形式下拉

Question

我使用这个https://ant.design/components/form/ ant 模板创建了一个表单。对于下拉菜单，我需要从数据库中检索值。但我仍然找不到实现的方法。

我正在使用 react js，我可以从 `componentDidMount()' 方法中的数据库中获取值。但是我找不到将它传递给 ant 中定义的下拉数组的方法。

 for (var i = 0; i < array.length; i++) {
            dropdownItems = [{
                value: array[i],
                label: array[i]
            }
            ];
  }

在上面的代码中，我尝试将结果提取到 dropdownItems 数组中。但由于 dropdownItems 是只读属性，这是不可能的。那么我们如何才能做到这一点呢？

Answer 1

你应该在组件的状态中存储下拉值..

import { Select } from 'antd';
class MyComponent extends Component {
    constructor(props){
        super(props);
        this.state = {
          dropdownItems: [],
          selectedValue: null
        }
    }

    componentDidMount(){
      fetch(api)
      .then(resp => resp.json())
      .then(dropdownData => {
         this.setState({ 
           dropdownItems: dropdownData.map(item => ({ value: item, label: item })) }) 
      })
    }

    handleChange = (value) => {
       this.setState({ selectedValue: value })
    }

    render(){
        const { dropdownItems, selectedValue} = this.state;
        return(
          <Select defaultValue={selectedValue} onChange={this.handleChange}>
            {dropdownItems.map((item, index) => <Select.Option value={item.value} key={index}>{item.label}</Select.Option>)}
          </Select>
        );
    }
}