无法从react-select AsyncSelect下拉菜单中获取选择的值。

Question

成功地从服务器获取数据，但在选择选项时没有被选中，也没有显示在下拉菜单中，而且值也没有被存储在selectedOption中。

import AsyncSelect from 'react-select/async';

const Register = (props) => {
  const [selectedOption, setSelectedOption]=useState("");

  const loadOptions = async (inputValue, callback) => {

      const response = await fetch('http://localhost:8080/api/user_location'+inputValue)
      const json = await response.json();
      callback(json.map(i=>({label:i.vdc+', '+i.district, value:i.vdc_id})));
  }

  const onChangeSelectedOption = (e) => {
    const selectedOption = e.target.value;
    setSelectedOption(selectedOption);
  };

  return (
         <AsyncSelect
           value={selectedOption}
           onChange={onChangeSelectedOption}                    
           loadOptions={loadOptions}
           defaultOptions={false}
           placeholder="Your Place"
         />
 );
};

谢谢你

Answer 1

onChange 事件返回 selected object，不 event object

const onChangeSelectedOption = (e) => {
    console.log(e); // <---- this will be selected object not event
    const selectedOption = e.value; // <--- you can get value from object directly
    setSelectedOption(selectedOption);
};

工作演示 :