Formik中React-Select数组实现选项互斥功能的方法问询

我明白你遇到的痛点了——直接修改全局选项列表的话，删除已选内容时很容易把当前选中的选项也搞丢。其实根本不需要去维护一个被修改过的theatreList，换个思路：让每个React-Select的可用选项动态计算出来，基于当前所有已选中的其他项，这样既实现了互斥，又不会破坏当前选中状态。

核心思路 #

1. 先存一份完整的原始选项列表（永远不修改它）；
2. 给每个索引的React-Select计算可用选项：从原始列表里排除掉「其他已选中的选项」，当前项自己的选中值要保留；
3. 完全依赖Formik的values实时更新选项，不需要手动修改全局列表。

具体实现步骤 #

1. 保存原始完整选项

先把从接口或其他地方拿到的所有影院选项存起来，作为基准：

// 这是你拿到的完整影院选项，永远不要修改它！
const originalTheatreOptions = [
  { value: "1", label: "影院A" },
  { value: "2", label: "影院B" },
  { value: "3", label: "影院C" },
  // ...更多选项
];

2. 动态计算每个React-Select的可用选项

在渲染字段数组的时候，针对每个索引的下拉框，实时计算它能显示的选项：

{values.movie_screens_attributes.map((screen, index) => {
  // 收集所有「其他项已选中的screen_id」，排除当前索引的项
  const selectedOtherIds = values.movie_screens_attributes
    .filter((_, i) => i !== index) // 跳过当前项
    .map(item => item.screen_id)
    .filter(Boolean); // 过滤掉未选中的空值

  // 计算当前下拉框的可用选项：原始列表中不在「其他已选中」里的选项
  const availableOptions = originalTheatreOptions.filter(
    option => !selectedOtherIds.includes(option.value)
  );

  return (
    <div key={index}>
      <Field
        name={`movie_screens_attributes[${index}].screen_id`}
        render={({ field }) => (
          <ReactSelect
            {...field}
            options={availableOptions}
            placeholder="选择影院"
            // 处理选中逻辑，把value同步给Formik
            onChange={(selectedOption) => {
              field.onChange(selectedOption ? selectedOption.value : null);
            }}
            // 回显当前选中的选项（从原始列表里找，避免找不到的问题）
            value={originalTheatreOptions.find(opt => opt.value === field.value)}
            // 如果你需要处理 touched 状态，保留onBlur但不要改选项列表
            onBlur={() => {
              setFieldTouched(`movie_screens_attributes[${index}].screen_id`, true);
            }}
          />
        )}
      />
      {/* 删除按钮，移除当前字段数组项 */}
      <button onClick={() => arrayHelpers.remove(index)}>删除</button>
    </div>
  );
})}

为什么这样能解决你的问题？ #

• 不会破坏当前选中状态：每个下拉框的可用选项排除的是「其他项的选中值」，当前项自己的选中值始终在可用列表里；
• 自动同步状态：不管是选中新选项还是删除某一项，Formik的values会实时更新，每个下拉框的可用选项也会自动重新计算；
• 不需要维护修改后的全局列表：原始选项列表永远不变，避免了修改后恢复的麻烦。

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