shadcn/ui Select组件动态选项下defaultValue不显示问题求助

核心问题分析 #

你的Select组件初始不显示默认值，主要源于两个关键点：

1. 表单默认值设置的是商家ID（expense._id），但Select需要显示对应的商家名称，而初始时商家列表（showFilter）可能未加载完成，无法匹配ID对应的名称。
2. 使用react-hook-form时，直接给Select设置defaultValue会和表单的状态控制冲突，应该由form的field来接管值的管理。

具体解决方案 #

方案1：自定义SelectTrigger显示内容，确保名称匹配

先通过Redux或商家列表获取默认商家的名称，然后自定义Select的显示内容：

import { useMemo } from 'react';

// 获取默认商家名称：优先从已加载的商家列表匹配，否则用expense中的名称（或占位符）
const defaultMerchantName = useMemo(() => {
  if (!data) return expense.merchantName || '选择商家';
  const matchedMerchant = showFilter.find(merchant => merchant.id === expense._id);
  return matchedMerchant ? matchedMerchant.name : '选择商家';
}, [data, showFilter, expense]);

// 修改Select组件
<Select
  value={field.value}
  onValueChange={field.onChange}
>
  <FormControl>
    <SelectTrigger id="merchant">
      {/* 自定义显示逻辑：根据当前field值匹配商家名称，无值时用默认名称 */}
      <span>
        {field.value 
          ? showFilter.find(m => m.id === field.value)?.name || defaultMerchantName
          : defaultMerchantName
        }
      </span>
    </SelectTrigger>
  </FormControl>
  <SelectContent>
    <SelectGroup>
      <ScrollArea className="h-50 mt-3">
        {!data ? (
          <Loader />
        ) : (
          showFilter.map((merchant) => (
            <div key={merchant.id}>
              <SelectItem value={merchant.id}>
                {merchant.name}
              </SelectItem>
              <SelectSeparator />
            </div>
          ))
        )}
      </ScrollArea>
    </SelectGroup>
  </SelectContent>
</Select>

方案2：修正表单初始化的时序问题

由于expense是从Redux异步获取的，初始时表单默认值可能未正确设置，需要在expense更新时同步表单值：

import { useEffect } from 'react';

// 初始化表单时先设为空值，后续通过useEffect更新
const form = useForm<z.infer<typeof FormSchema>>({
  resolver: zodResolver(FormSchema),
  defaultValues: {
    merchant: '',
    expenseNumber: '',
    amount: 0,
    tax: 0,
    date: new Date(),
    expenseDescription: '',
  },
});

// 当expense加载完成后，更新表单值
useEffect(() => {
  if (!expense?._id) return;
  
  form.setValue('merchant', expense._id);
  form.setValue('expenseNumber', expense.expenseId);
  form.setValue('amount', expense.amount);
  form.setValue('tax', expense.tax);
  form.setValue('date', new Date(expense.date));
  form.setValue('expenseDescription', expense.expenseDescription);
}, [expense, form]);

方案3：优化SelectValue的占位符配置

如果坚持使用<SelectValue />，可以给它设置动态占位符，确保初始状态有内容显示：

<Select
  value={field.value}
  onValueChange={field.onChange}
>
  <FormControl>
    <SelectTrigger id="merchant">
      <SelectValue placeholder={defaultMerchantName} />
    </SelectTrigger>
  </FormControl>
  <SelectContent>
    {/* 保持原有的商家列表渲染逻辑 */}
  </SelectContent>
</Select>

关键注意事项 #

• 避免同时使用defaultValue和react-hook-form的field，表单值应该完全由form控制，使用value={field.value}。
• 处理异步数据加载的状态：在商家列表未加载完成时，用占位符或expense中已有的商家名称兜底。

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