如何重置ShadCN/UI <Select>组件值？级联下拉重置失效问题

核心问题在于仅重置state值但未同步清空组件内部状态，尤其是遇到同名选项时，组件会因缓存或值匹配错误自动选中旧值。以下是可行的解决方案：

• 给下级Select绑定key属性，值关联上级选中项。上级切换时，下级组件会被强制重新渲染，彻底重置内部状态，不会残留旧值：

  <Select
    key={selectedCategory}
    value={selectedSku}
    onChange={setSelectedSku}
    options={skuOptions}
  />
  

• 切换上级时，彻底清空所有依赖的下级状态，不仅要设为undefined，还要同步清空关联的选项列表：

  const handleCategoryChange = (newCategory) => {
    setSelectedCategory(newCategory);
    // 重置所有依赖下级的状态
    setSelectedSku(undefined);
    setSelectedSpec(undefined);
    setSkuOptions([]);
  };
  

• 异步加载下级选项时，先清空选中值再加载新选项，避免新选项渲染时被旧值干扰：

  useEffect(() => {
    if (!selectedCategory) return;
    // 先清空选中值
    setSelectedSku(undefined);
    // 加载对应分类的SKU选项
    fetchSkuOptions(selectedCategory).then(options => {
      setSkuOptions(options);
    });
  }, [selectedCategory]);
  

• 禁止用DOM操作重置组件，React是状态驱动模型，直接操作DOM会导致状态与视图不一致，必须通过状态+key的组合来控制组件重置。

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