Shadcn-UI 中 ShadSelect.multiple 组件初始值重复问题解析

问题现象

在使用 Shadcn-UI 的 ShadSelect.multiple 组件时，开发者反馈当设置 initialValues 属性后，点击下拉选项会出现选项重复且无法取消选择的问题。具体表现为：

• 初始设置的选项会被重复添加
• 重复的选项无法通过交互取消选择
• 组件行为与预期不符

问题根源

经过分析，这个问题实际上是由于开发者在使用 initialValues 时传入的值与选项的 value 不匹配导致的。在 Shadcn-UI 的实现中：

1. 组件内部使用 Map 结构存储选项，其中 key 为选项的实际值，value 为显示文本
2. initialValues 应该传入的是选项的 key 值而非显示文本
3. 当传入的初始值与选项 key 不匹配时，组件无法正确识别已选状态，导致重复选择

正确用法

正确的实现方式应该是确保 initialValues 数组中的值与选项的 value 完全一致（包括大小写）：

final fruits = {
  'apple': 'Apple',
  'banana': 'Banana',
  'blueberry': 'Blueberry',
  'grapes': 'Grapes',
  'pineapple': 'Pineapple'
};

ShadSelect<String>.multiple(
  initialValues: ["apple", "banana", "blueberry", "grapes"], // 使用小写的key值
  options: [
    ...fruits.entries.map(
      (e) => ShadOption(
        value: e.key, // 这里使用的是小写的key
        child: Text(e.value),
      ),
    ),
  ],
)

技术建议

1. 类型安全：建议使用枚举或常量来定义选项值，避免拼写错误
2. 大小写敏感：确保初始值与选项值的大小写完全一致
3. 调试技巧：遇到类似问题时，可以先检查选项的 value 和 initialValues 是否完全匹配
4. 组件改进：可以考虑在组件内部添加断言检查，当初始值不在选项范围内时给出明确警告

总结

Shadcn-UI 的 ShadSelect.multiple 组件是一个功能强大的多选组件，但在使用时需要注意初始值与选项值的严格匹配。理解组件内部的数据结构和匹配逻辑，可以帮助开发者避免这类问题。对于框架开发者而言，增加输入验证和错误提示可以显著提升开发体验。