Получить значения из базы данных в раскрывающемся списке в форме муравья

Question

Я создал форму, используя этот https://ant.design/components/form/ шаблон муравья.Там для раскрывающегося списка мне нужно получить значения из базы данных.Но все же я не смог найти способ добиться этого.

Я использую реагирование 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>
        );
    }
}