react-select完成Ajax请求加载选项列表后无法设置默认选中值如何解决

问题根源 #

• 错误使用了不存在的 selectedValue 属性，react-select 受控模式下绑定选中值的正确属性是 value
• onChange 回调中给 selectedManager 赋值的格式与 options 项格式不匹配：options 里的每一项是 {value: id, label: displayName} 格式，但你在 onChange 里存的是原始接口返回的 {id, displayName} 格式的对象，react-select 无法识别该格式，导致切换选中后无展示

修复后的完整代码 #

import React, { useEffect, useState } from "react";
import axios from "../../custom/api/axios";
import Select from "react-select";

const UserForm = () => {
  const [managerList, setManagerList] = useState([]);
  const [formattedManagersList, setFormattedManagersList] = useState([]);
  const [selectIsLoading, setSelectIsLoading] = useState(true);
  const [selectedManager, setSelectedManager] = useState(null);

  useEffect(() => {
    getManagers();
  }, []);

  const getManagers = async () => {
    setSelectIsLoading(true);
    try {
      const response = await axios.get(
        `${process.env.REACT_APP_API_URL}/managers`
      );
      const formattedList = response.data.data.map((item) => ({
        value: item.id,
        label: item.displayName,
        // 如果需要用到原始manager数据可以存在这里，后续onChange直接取
        raw: item
      }));
      setManagerList(response.data.data);
      setFormattedManagersList(formattedList);
      // 直接匹配格式化后的列表里的项，避免手动写值出错
      setSelectedManager(formattedList.find(item => item.value === 3));
    } catch (err) {
      console.log(err);
    }
    setSelectIsLoading(false);
  };

  return (
    <Select
      options={formattedManagersList}
      isLoading={selectIsLoading}
      placeholder="Select a Manager..."
      // onChange直接存select返回的格式化对象，格式和options一致
      onChange={(item) => {
        setSelectedManager(item);
        // 如果需要拿到原始manager数据可以取 item.raw
      }}
      // 用正确的value属性绑定选中值
      value={selectedManager}
    />
  );
};

export default UserForm;

额外说明 #

如果业务中需要单独存储原始的manager对象，不要和传给react-select的value状态混用，可以新增一个单独的状态比如selectedManagerRaw用来存储原始数据，避免和组件要求的格式冲突。

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