React Antd Select下拉框如何将默认选项显示在列表顶部

问题原因 #

你当前是将--select--默认选项追加到collegesList数组的末尾，数组遍历渲染下拉项的时候顺序和数组存储顺序一致，所以默认项会显示在列表最底部。

解决方法 #

有两种常用实现方案，可按需选择： #

方案1：调整数组拼接顺序（修改现有逻辑即可）

直接修改useEffect中更新数组的代码，把默认选项放在展开的原有数组前面，即可让它出现在列表顶部：

useEffect(() => {
  const defaultState = {
    name: "--select--"
  };
  // 把defaultState放在数组最前面
  setCollegesList([defaultState, ...collegesList]);
  console.log("initial load");
}, []);

注意：建议给defaultState新增唯一的id字段，避免和原有院校列表的索引/标识冲突，防止后续选中逻辑出错。

方案2：直接在Select内写死默认项（逻辑更清晰，无需修改原有数组）

不需要修改collegesList的数组逻辑，直接在渲染Select的时候先写死默认Option，再遍历原有院校列表：

<Select
  placeholder="Please select a country"
  onChange={(college) => {
    // 可选：选中默认项时不触发后续业务逻辑
    if(college === 'default') return
    setCollegesSelectedList([
      ...collegesSelectedList,
      collegesList[college].name
    ]);
  }}
>
  {/* 先渲染默认选项 */}
  <Option value="default">--select--</Option>
  {/* 再遍历原有院校列表 */}
  {Object.keys(collegesList).map((college) => (
    <Option value={college}>{collegesList[college].name}</Option>
  ))}
</Select>

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