NextJS + Conform加载数据后下拉选择框无法填充问题

在CSR组件中使用Conform和Zod构建编辑表单，从服务器加载初始数据后，名称字段能正确填充，但下拉选择框始终选中默认的“Seleccionar categoría”选项，无法自动匹配category.idPadre对应的父分类。已确认category数据加载完成且idPadre存在有效值，尝试过将id转为字符串、新增状态管理等方法均无效。

解决方案 #

问题核心是Conform表单初始化时机与数据加载时机不匹配，且手动设置defaultValue会干扰Conform的状态管理。以下是修复步骤：

1. 让Conform监听数据变化自动重新初始化表单 #

在useForm配置中添加reinitialize选项，监听category的变化，当数据加载完成后自动更新表单默认值：

const [form, fields] = useForm({
    lastResult,
    defaultValue: {
        id: category?.id,
        nombre: category?.nombre,
        idPadre: category?.idPadre ? category.idPadre.toString() : "",
    },
    onValidate({ formData }) {
        return parseWithZod(formData, {
            schema: updateCategorySchema,
        })
    },
    shouldValidate: "onBlur",
    shouldRevalidate: "onInput",
    // 当category数据更新时重新初始化表单
    reinitialize: category,
})

2. 移除手动设置的defaultValue，使用Conform字段属性绑定 #

Conform会自动管理表单字段的状态，无需手动设置defaultValue，直接展开fields对应的属性即可：

修改名称输入框

<Input
    className="mt-1"
    {...fields.nombre} // 展开Conform提供的字段属性（name、value等）
    id="nombre"
    placeholder="Ingrese el nombre"
/>

修改下拉选择框

<select
    className="mt-1 block w-full rounded-md border border-gray-300 p-2 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
    {...fields.idPadre} // 展开Conform字段属性，自动绑定正确的value
    id="idPadre"
    disabled={categories.length <= 1}
>
    <option value="">
        {categories.length > 1 ? "Seleccionar categoría" : "No hay categorías"}
    </option>
    {categories
        .filter(cat => cat.id !== category.id)
        .map((cat) => (
            <option key={cat.id} value={cat.id.toString()}>
                {cat.nombre}
            </option>
        ))}
</select>

原因说明 #

• 初始渲染时category为null，useForm的defaultValue中idPadre为空字符串；当数据加载完成后，useForm默认不会重新初始化，导致表单状态仍保持初始空值。
• 手动设置defaultValue会与Conform的内部状态管理冲突，必须通过Conform提供的字段属性来绑定表单控件，确保状态统一。

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