React+NextUI多选下拉框：按指定顺序展示选中项问题

我用NextUI实现了一个员工工作日选择的多选下拉框，当前选中项会按用户选择的顺序展示，需求是改成按workingDaysOptions数组的固定顺序（周一到周日）排序——比如用户选了「Tuesday」「Friday」「Monday」，最终要显示为「Monday」「Tuesday」「Friday」。

核心修改方案 #

1. 修正选择处理函数

不要直接修改原state数组，通过创建新数组保证状态不可变性；同时利用原数组的索引直接排序，无需额外维护排序映射对象：

const workingDaysOptions = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"] 

const [selectedWorkingDaysOptions, setSelectedWorkingDaysOptions] = useState([]);

// 修正后的选择处理函数
const handleSelection = (keys) => {
  // 基于原数组的索引排序，创建新数组避免修改原state
  const sortedDays = [...keys].sort((a, b) => {
    return workingDaysOptions.indexOf(a) - workingDaysOptions.indexOf(b);
  });
  setSelectedWorkingDaysOptions(sortedDays);
};

2. 正确传递组件Props

确保CustomSelect组件的多选模式开启，并且正确绑定处理函数：

<CustomSelect
  classAttributes="your-custom-class"
  label="选择工作日"
  placeholder="请选择"
  selectionMode="multiple" // 必须开启多选模式
  selectedKeys={selectedWorkingDaysOptions}
  onSelectionChange={handleSelection}
  mappedArray={workingDaysOptions}
  isRequired={true}
/>

原方案失效原因 #

1. 直接修改State数组：selectedWorkingDaysOptions.sort()会直接篡改原state数组，React依赖状态的引用变化触发重渲染，这种操作不会触发组件更新，也违反了React状态不可变的原则。
2. 未接收选中值：原handleSelection函数没有接收onSelectionChange传递的选中keys，导致setSelectedWorkingDaysOptions没有传入正确的新值。
3. 冗余排序对象：完全可以利用原数组的索引实现排序，不需要额外定义workingDaySorter，减少不必要的维护成本。

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