如何为shadcn Combobox设置默认值（编辑页城市选择表单）

要在编辑页面给这个城市选择Combobox设置默认值，按以下步骤修改：

• 初始化状态默认值
  假设你的编辑页面已有后端返回的初始数据（比如叫initialData），其中包含选中的城市ID（initialData.city）。先从cities数组里找到对应ID的城市对象，把value状态的初始值设为该城市的显示文本（也就是CommandItem里的${city.type} ${city.name}）。

• 让CommandInput受控
  给<CommandInput>加上value={value}属性，确保输入框显示默认值，且状态同步。

• 初始化时加载关联数据
  如果需要默认加载该城市对应的区县数据，用useEffect在组件挂载时，根据初始城市ID调用fetchSubdistrict，并设置对应的subdistrict、village状态。

修改后的完整代码示例：

// 假设已定义状态：const [value, setValue] = useState("");
// 假设初始编辑数据：const initialData = useMemo(() => props.editData, [props.editData]);

// 组件挂载时初始化默认值和关联数据
useEffect(() => {
  if (initialData.city) {
    const targetCity = cities.find(city => city.id.toString() === initialData.city);
    if (targetCity) {
      setValue(`${targetCity.type} ${targetCity.name}`);
      setData(prev => ({
        ...prev,
        city: initialData.city,
        subdistrict: initialData.subdistrict || "",
        village: initialData.village || ""
      }));
      // 如果需要默认加载区县数据
      fetchSubdistrict(targetCity.id);
      // 如果有初始区县，还可以进一步加载村庄数据，这里根据你的逻辑调整
    }
  }
}, [initialData, cities]);

// 渲染Combobox部分
<Command>
  <CommandInput 
    placeholder="Search kota..." 
    value={value} // 新增：绑定value状态
  />
  <CommandEmpty>No kota found.</CommandEmpty>
  <CommandList>
    {cities.map((city) => (
      <CommandItem
        key={city.id}
        value={`${city.type} ${city.name}`} // 改成和显示文本一致，避免匹配问题
        onSelect={() => {
          setData((data) => ({
            ...data,
            city: city.id.toString(),
            subdistrict: "",
            village: "",
          }));
          fetchSubdistrict(city.id);
          setVillages([]);
          setValue(`${city.type} ${city.name}`); // 同步显示文本
          setOpen(false);
        }}
      >
        {`${city.type} ${city.name}`}
      </CommandItem>
    ))}
  </CommandList>
</Command>

注意点：

• 确保CommandItem的value属性和显示文本一致，这样选择时状态匹配更准确。
• 如果你的初始数据里有区县或村庄的默认值，要在useEffect里同步到对应的状态中。
• 如果cities是异步加载的（比如从接口获取），要把cities加入useEffect的依赖数组，确保数据加载完成后再初始化默认值。

内容的提问来源于stack exchange，提问作者Samuel Christiawan Indrayanto