如何将API返回的JSON数据设置为react-select默认值

问题原因 #

你遇到的异常来自两个机制冲突：

• defaultValue仅在组件首次挂载时读取生效，你的接口是异步请求，组件首次渲染时tag_data还是初始值，等接口返回数据时组件已经完成挂载，defaultValue不会再重新读取更新后的值，所以默认值不生效。
• 直接将value绑定为tag_data[0]时，onChange触发后你没有更新这个绑定值，组件始终拿到固定的tag_data[0]，就会进入无法切换选项的只读受控状态。

正确实现方式 #

异步加载的选项默认值必须用受控模式实现，不要依赖defaultValue，在接口返回数据后同步更新选中状态即可。

1. 修正状态初始值，避免初始嵌套数组导致组件渲染异常：

// 选中值状态，多选模式初始值为空数组
const [tag, setTag] = useState([])
// 选项列表状态，初始值为空数组
const [tag_data, setTagData] = useState([]);

2. 在接口请求完成后，同时更新选项列表和默认选中值：

useEffect(() => {
    (async () => {
        const tag_result = await axios(`${process.env.REACT_APP_API_URL}/tag`);
        const optionList = tag_result.data;
        setTagData(optionList);
        // 设置默认选中值，isMulti模式下必须传数组，比如默认选前两项就传[optionList[0], optionList[1]]
        setTag([optionList[0]]);
    })();
}, []);

3. 调整Select组件配置，全程使用受控绑定：

<Select
    id="react-select-tag"
    isMulti
    options={tag_data}
    hideSelectedOptions={false}
    getOptionLabel={(option) => option.content_tag}
    // 建议用唯一id作为选项值标识，避免标签重名导致选中错乱
    getOptionValue={(option) => option.id}
    value={tag}
    onChange={(selectedOptions) => setTag(selectedOptions)}
/>

补充提示：如果是单选模式（去掉isMulti属性），默认选中值直接传单个对象即可，不需要包在数组里，即setTag(optionList[0])。

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