无法从 react-select AsyncSelect 下拉列表中获取 selected 值

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 事件 returns 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);
};

工作演示：

无法从 react-select AsyncSelect 下拉列表中获取 selected 值

Unable to get selected value from react-select AsyncSelect dropdown

reactjs

react-select

react-hooks