reactjs - 如何更新 React 选择列表

Question

我正在尝试从 React select 更新列表，但无法更新，我不知道为什么会发生，我认为我的 handleChange() 方法有问题，但我没有得到什么问题。谢谢。！！

代码：-

import React, { Component } from 'react';

import Select from 'react-select';
   
class  extends countryComponent {
    constructor(props) {
            super(props);
            this.state = {
              country:[],
            };
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
        }

 handleChange(event) {
    const { name, value } = event.target;
    this.setState({
      [name]: value
      
    });
  }

  async componentDidMount(){
    await API.get("/country").then(response=>{
      console.log(response);
      this.setState({country:response.data.data.country});
  })     
 Country=()=>{  
  return (this.state.country.map(data => ({ label: data.name, value: data.id })))  
}    
     
    render() { 
        
        return ( <>

                            <Form.Group>
                                <Form.Label id="formLabel">Country</Form.Label>
                                <Select options={this.Country()}/>
                            </Form.Group>
</>)
}
export default Country;

标签： reactjs

Answer 1

您正在异步加载选项。应该改用“react-select/async”。请参考https://react-select.com/async