使用搜索API时如何为React-select Async加载编辑功能所需初始选项

我使用React-Select的Async Select实现了支持海量数据搜索的下拉框，用户搜索时可查看员工姓名，支持多选多名员工。

React-select通过自定义搜索API获取数据，查询参数拼接代码如下：

const loadOptions = async () => {
        const res = await fetch(`https://example.com/search_user?value=${query}`);
        const data = await res.json();
        const results = data.Result;

        if (results === 'No result found.') {
            return [];
        }

        return results;
    };

业务需要获取员工ID和全名，用户提交表单后将两类信息上传到API，原有功能运行正常。后续需要实现编辑功能，允许用户编辑已保存到数据库的Group Members，需要为Async下拉框加载初始选项，但现有的搜索API仅在输入搜索内容后才会返回对应结果，无法直接加载初始选中项，要求用户点击编辑时，下拉框自动显示数据库中已保存的员工姓名，支持单选/多选的选中状态。

问题排查 #

最初尝试使用value配置实现初始值加载时，出现异常：无论取消选中、清空选项，还是搜索并选择新选项，输入框的选中状态都没有变化。

最终解决方案 #

AsyncSelect的用法和普通react-select Select组件完全一致，只需要将value属性绑定到state，同时为onChange属性绑定handleChange方法修改对应state即可实现需求。
最终实现代码如下：

// 为选中选项创建state
const [selectedOption, setSelectedOption] = useState('')

// 设置/加载当前待编辑/管理项保存的初始值
useEffect(() => {
    // 此处编写获取初始值的逻辑，将返回结果赋值给对应state
   setSelectedOption(initial)
}, [modalInfo]);

// 处理选中值/选项变化的方法
const handleChange = (selectedOption) => {
     setSelectedOption(selectedOption);
};

// 组件只需绑定onChange和value属性即可
return (
        <AsyncSelect
            onChange={handleChange}
            value={selectedOption}
            loadOptions={loadOptions}
            cacheOptions
            defaultOptions
            isMulti
            components={animatedComponents}
            getOptionLabel={(e) => e.fullname}
            getOptionValue={(e) => e.empId}
            onInputChange={(value) => setQuery(value)}
        />
    );

内容的提问来源于stack exchange，提问作者Lance