Next.js中如何无需用户输入提交预设变量至MongoDB？

问题核心是预设字段仅作为占位符，未被自动纳入提交数据，且必填验证阻碍提交。以下两种方案可解决：

方案一：使用隐藏输入字段（推荐，保持react-hook-form自动收集数据） #

1. 调整字段配置：修改Index组件的fields数组，将预设字段改为hidden类型，移除placeholder，添加value，并设required: false：

const Index = () => {
    const issuedDate = new Date().toISOString(); // 转成MongoDB兼容的字符串格式
    const selectedKey = "123abc";
    const fields = [
        {type: "text", name: "token_name", required: true, label: "token_name"},
        {type: "date", name: "token_expire_date", required: true, label: "token_expire_date"},
        {type: "hidden", name: "token_issue_date", required: false, label: "token_issue_date", value: issuedDate},
        {type: "hidden", name: "token_value", required: false, label: "token_value", value: selectedKey}
    ]
    // ... 其余代码不变
}

2. 修改表单渲染逻辑：在renderForm中判断字段类型，隐藏字段渲染为隐藏输入框，无需显示标签和错误提示：

const renderForm = ({register, errors, isSubmitting}) => {
    return <>
        {fields.map(field => {
            if (field.type === "hidden") {
                return <input type="hidden" {...register(field.name)} value={field.value} />
            }
            return (
                <>
                    <label htmlFor={field.name}>{field.label}</label>
                    <input type={field.type} autoComplete={field.autoComplete} placeholder={field.placeholder}
                            {...register(field.name, {required: field.required})} />
                    <div className="error">{errors[field.name]?.message}</div>
                </>
            )
        })}

        <button disabled={isSubmitting}>
            {isSubmitting ? <Loading/> : "Submit"}
        </button>
    </>;
}

方案二：提交时手动合并预设数据 #

无需渲染预设字段的输入框，直接在提交阶段将预设值合并到表单数据中：

1. 传递预设数据到FormComponent：修改Index组件的返回值，传入预设数据：

const Index = () => {
    const issuedDate = new Date().toISOString();
    const selectedKey = "123abc";
    const fields = [
        {type: "text", name: "token_name", required: true, label: "token_name"},
        {type: "date", name: "token_expire_date", required: true, label: "token_expire_date"}
        // 移除后两个预设字段，无需渲染
    ]

    const renderForm = ({register, errors, isSubmitting}) => {
        // ... 仅渲染前两个输入字段，其余逻辑不变
    }

    return <FormComponent 
        url="/api/form" 
        renderForm={renderForm} 
        presetData={{token_issue_date: issuedDate, token_value: selectedKey}} 
    />
}

2. 修改FormComponent的提交逻辑：在onSubmit中合并用户输入和预设数据：

function FormComponent({url, renderForm, presetData}) {
    // ... 其余代码不变

    const onSubmit = async (userData) => {
        // 合并用户输入与预设数据
        const submitData = {...userData, ...presetData};
        const response = await saveFormData(submitData, url)

        // ... 后续错误处理逻辑不变
    }

    // ... 其余代码不变
}

额外注意事项 #

• 日期对象需转换为字符串（如toISOString()），确保MongoDB能正确存储。
• 若使用方案一，需确认后端接口接受隐藏字段的提交值；若使用方案二，后端无需调整，因为提交数据已包含所有字段。

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