NextJS中shadcn-ui Combobox组件useState值更新异常问题

问题原因 #

• CommandItem的onSelect回调里的value参数是组件固定的属性值（即你定义的opt），和当前选中状态无关。不管你点击多少次同一个选项，这个value始终是选项本身的字符串，所以console.log(value)输出的永远是原选项值，不会变成空。
• UI显示正常是因为setSelectedOption的判断逻辑生效了：第二次点击时，selectedOption已经等于当前选项值，所以条件value === selectedOption成立，将状态设为空字符串，按钮因此显示searchPlaceholder。

修复方案 #

如果你想在控制台看到实际设置的选中状态值，不要直接打印回调的value，而是先计算出要设置的目标值，再打印这个值。同时还要修正updateURLParams的传参，确保URL参数和状态同步：

<CommandItem
  key={opt}
  value={opt}
  onSelect={(value) => {
    // 先计算要设置的新值
    const newSelected = value === selectedOption ? '' : value;
    setSelectedOption(newSelected);
    console.log(newSelected); // 这里打印的就是实际的选中状态值
    updateURLParams(newSelected); // 同步URL参数
    setOpen(false);
  }}
/>

额外注意点 #

原代码中updateURLParams传的是value，这会导致重置时URL参数仍然被设为选项值（而不是删除），改成传newSelected后，才能确保当选中状态为空时，URL中对应的参数被正确删除。

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