React-Select默认值设置失效：如何配置服务端返回的默认选项

问题场景 #

我在使用React-Select组件时，遇到了无法将数据库服务端获取的选项设置为默认选中项的问题：

• 尝试用useState实现时，获取到的是更新前的对象
• 改用useRef后值能立即更新，但组件仍不显示默认选项

相关代码 #

组件逻辑代码：

export default function EditAccountPopup(props) {
  const thisVatId = localStorage.getItem('CusVAT_Id');
  const [selectSortCode, setSelectSortCode] = useState([]);
  const [accountNumber, setAccountNumber] = useState('');
  const [sortCodeValue, setSortCodeValue] = useState('');
  const [sortCodeObj, setSortCodeObj] = useState('');
  const [accountName, setAccountName] = useState('');
  const [accountType, setAccountType] = useState('');
  const [vatId, setVatId] = useState('');
  const [allData, setAllData] = useState();
  const show = useRef();

  const getData = async () => {
    const selectedNum = props.selectedRow.number;
    const selectedSort = props.selectedRow.sort_code;
    await fetch('/accounts/selectedAccountData', {
      method: 'POST',
      body: JSON.stringify({ thisVatId, selectedNum, selectedSort }),
    })
      .then(async res => await res.json())
      .then(async res => {
        console.log(res);
        setAllData(res);
        show.current = { value: res.sort_code, label: res.sort_codeName };
        setSortCodeObj({ value: res.sort_code, label: res.sort_codeName });
        console.log(show.current);
        setAccountNumber(res.number);
        setAccountName(res.name);
        setAccountType(res.type);
        setSortCodeValue(res.sort_code);
        setVatId(res.vat_number);
      });
  };

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

  const refSortCode = () => {
    return show.current ? [show.current] : null;
  };

React-Select组件代码：

<p>*קוד מיון:</p>
<Select
  defaultValue={refSortCode()}
  options={selectSortCode}
  styles={selectStyle}
  placeholder='בחר קוד מיון'
  onChange={e => {
    setSortCodeValue(e.value);
  }}
/>

问题原因与解决方法 #

1. 错误使用useRef控制组件状态

React-Select是受控组件，依赖React状态更新触发重新渲染。useRef的变更不会触发组件重渲染，所以就算show.current的值更新了，组件也不会重新渲染来展示选中状态。

2. 误用defaultValue而非value属性

defaultValue只在组件第一次初始化时生效，而服务端数据是异步获取的，初始化时还没拿到数据，所以defaultValue根本无法获取到后续返回的选中值。应该改用value属性绑定状态，让组件跟随状态变化更新。

3. 修正后的代码实现

• 首先修正sortCodeObj的初始值，避免空字符串引发格式错误：

const [sortCodeObj, setSortCodeObj] = useState(null); // 初始化为null，符合React-Select的空状态要求

• 然后修改React-Select组件的属性，用value绑定状态：

<p>*קוד מיון:</p>
<Select
  value={sortCodeObj} // 绑定状态，替代defaultValue
  options={selectSortCode}
  styles={selectStyle}
  placeholder='בחר קוד מיון'
  onChange={e => {
    setSortCodeValue(e.value);
    setSortCodeObj(e); // 选中变化时同步更新状态
  }}
/>

4. 额外注意事项

确保selectSortCode（选项列表）已经加载完成。如果selectSortCode也是异步获取的，要保证它在设置sortCodeObj前已经获取到数据，否则React-Select找不到对应的选项，也无法显示选中状态。可以在getData之前先加载选项列表，或者在useEffect中添加依赖项，等选项列表就绪后再设置选中项。

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