如何移除Ant Design Select下拉框的默认选中值？

你遇到的无法移除默认选中值的问题，核心是混用了Ant Design Form的表单控制逻辑和本地状态，加上可能的初始值设置错误导致的：

问题点拆解 #

1. 你的<Form.Item name='category'>给表单字段绑定了name，这会让Ant Design Form接管该组件的值，此时你设置的本地selectedCategories或者defaultValue优先级低于Form的控制，所以无效。
2. 无法移除的默认值，大概率是Form的initialValues里给category设了非空数组，或者selectedCategories的初始值不是空数组[]。

两种解决办法 #

办法1：完全用Form管理表单值（推荐） #

去掉本地的selectedCategories状态，让Form全权控制字段值：

• 在Form组件上设置initialValues={{ category: [] }}，确保初始值是空数组。
• 如果需要判断禁用逻辑，用Form实例的getFieldValue方法获取当前选中的分类。

修改后的代码示例：

// 先在组件内获取Form实例
const [form] = Form.useForm();

// 然后渲染Form
<Form form={form} initialValues={{ category: [] }}>
  <!-- 其他Form.Item -->
  <Form.Item label='Category' name='category'>
    <Select
      mode='multiple'
      bordered={false}
      placeholder='Select category'
      style={{ backgroundColor: 'white', padding: '5px', border: '1px solid #999db6' }}
    >
      {categories?.map((category, index) => {
        const currentSelected = form.getFieldValue('category') || [];
        return (
          <Select.Option
            key={index}
            value={category.key}
            disabled={currentSelected.length === 5 && !currentSelected.includes(category.key)}
          >
            {category.value}
          </Select.Option>
        );
      })}
    </Select>
  </Form.Item>
</Form>

办法2：保留本地状态，取消Form控制 #

如果一定要用本地selectedCategories管理值，就去掉Form.Item的name属性，让Select完全受控：

// 确保selectedCategories初始值是[]
const [selectedCategories, setSelectedCategories] = useState([]);

// 渲染部分
<Form.Item label='Category'>
  <Select
    mode='multiple'
    bordered={false}
    placeholder='Select category'
    value={selectedCategories} // 绑定本地状态
    onChange={(value) => setSelectedCategories(value)}
    style={{ backgroundColor: 'white', padding: '5px', border: '1px solid #999db6' }}
  >
    {categories?.map((category, index) => (
      <Select.Option
        key={index}
        value={category.key}
        disabled={selectedCategories.length === 5 && !selectedCategories.includes(category.key)}
      >
        {category.value}
      </Select.Option>
    ))}
  </Select>
</Form.Item>

额外检查点 #

• 确认selectedCategories的初始值是不是[]，如果不小心设成了包含某个分类的数组，就会出现默认选中且无法移除的情况。
• 检查Form的initialValues里有没有给category设置默认值，要是有就改成[]。

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