Next.js 14中使用Server Actions传递客户端日期的问题

你的问题核心在于React useState的更新是异步批量处理的：调用setDate后，组件不会立刻重新渲染，此时隐藏输入框的value还是初始空值，紧接着执行requestSubmit自然就传了空字符串。

以下是几种实用的解决办法：

方案一：直接操作DOM设置隐藏输入框值（无需state） #

跳过state，直接在提交前手动修改隐藏输入框的value，不用等组件重渲染，简单高效：

export default function Form() {
    const [_, action] = useFormState(addUser, {});

    const handleSubmit = (e) => {
        e.preventDefault();
        // 直接找到隐藏输入框并赋值
        const dateInput = e.currentTarget.form.querySelector('input[name="date"]');
        dateInput.value = new Date().toLocaleString();
        e.currentTarget.form.requestSubmit();
    }

    return (
        <form action={action}>
            <input type="text" name="username" placeholder="username" />
            <input type="hidden" name="date" />
            <button onClick={handleSubmit}>Add</button>
        </form>
    );
}

方案二：在Server Action中生成时间戳（推荐） #

时间戳的生成逻辑完全可以放到服务器端，既避免前端异步更新的问题，还能防止前端篡改时间，更可靠：

// 服务器端Action文件（比如actions.js）
'use server';

export async function addUser(formData) {
    const username = formData.get('username');
    // 服务器端直接生成时间戳
    const date = new Date().toLocaleString();
    // 后续业务逻辑：存数据库/返回结果等
    console.log('提交信息：', username, date);
    return { success: true };
}

前端组件可以简化成这样，不用管时间戳：

export default function Form() {
    const [_, action] = useFormState(addUser, {});

    return (
        <form action={action}>
            <input type="text" name="username" placeholder="username" />
            <button type="submit">Add</button>
        </form>
    );
}

方案三：监听state变化后再提交（适合特殊场景） #

如果一定要用state管理时间戳，可以通过useEffect监听state更新，完成后再提交表单：

import { useState, useEffect, useRef } from 'react';
import { useFormState } from 'react-dom';

export default function Form() {
    const [date, setDate] = useState("");
    const [shouldSubmit, setShouldSubmit] = useState(false);
    const [_, action] = useFormState(addUser, {});
    const formRef = useRef(null);

    const handleSubmit = (e) => {
        e.preventDefault();
        setDate(new Date().toLocaleString());
        setShouldSubmit(true); // 标记需要提交
    }

    useEffect(() => {
        // 当state更新且标记需要提交时，执行表单提交
        if (shouldSubmit && date) {
            formRef.current?.requestSubmit();
            setShouldSubmit(false); // 重置标记
        }
    }, [date, shouldSubmit]);

    return (
        <form ref={formRef} action={action}>
            <input type="text" name="username" placeholder="username" />
            <input type="hidden" name="date" value={date} />
            <button onClick={handleSubmit}>Add</button>
        </form>
    );
}

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