React useForm表单提交参数延迟更新问题求助

问题现象 #

首次点击提交按钮时，后端Laravel Controller接收的user_id与user_name均为null；第二次点击时，接收的是首次点击的参数；第三次点击则接收第二次的参数，呈现参数延迟提交的异常现象。曾尝试为setData添加await修饰，但未解决问题。

原因分析 #

React的状态更新（包括useForm提供的setData）是异步操作，调用setData后，表单的data并不会立刻更新。此时立刻调用post方法，提交的仍然是更新前的旧数据，导致后端接收到的参数总是慢一拍。

解决方案 #

方案一：直接传递参数到post方法（推荐） #

不需要先通过setData更新表单状态，直接将最新的userId和userName作为第二个参数传给post方法，确保提交的是当前点击的最新参数：

const handleSubmit = async (e, userId, userName) => {
    e.preventDefault()
    console.log('handleSubmit called')
    try {
        switch (action) {
            case "create":
                // 直接传入要提交的参数
                await post(route("hantar.katalaluanpdf"), {
                    user_id: userId,
                    user_name: userName
                })
                Swal.fire({
                    text: "Kata laluan PDF telah berjaya dihantar",
                    icon: "success",
                });
                break;
        }
    } catch (error) {
        Swal.fire({
            text: error,
            icon: "error",
        });
    }
};

方案二：确保状态更新后再提交（不推荐） #

如果必须依赖表单data的状态，可以使用useEffect监听data变化，在状态更新后执行提交逻辑，但这种方式需要额外标记避免重复提交，代码复杂度更高：

import { useEffect, useState } from 'react';

export default function SenaraiJualan({ app, auth, sales, action = 'create', sale }) {

    const { data, setData, post, put, errors, reset } = useForm({
        user_id: sale?.user_id ?? '',
        user_name: sale?.user_name ?? '',
    });
    const [shouldSubmit, setShouldSubmit] = useState(false);

    useEffect(() => {
        if (shouldSubmit) {
            const submit = async () => {
                try {
                    await post(route("hantar.katalaluanpdf"))
                    Swal.fire({
                        text: "Kata laluan PDF telah berjaya dihantar",
                        icon: "success",
                    });
                } catch (error) {
                    Swal.fire({
                        text: error,
                        icon: "error",
                    });
                } finally {
                    setShouldSubmit(false);
                }
            }
            submit();
        }
    }, [data, shouldSubmit, post, route]);

    const handleSubmit = (e, userId, userName) => {
        e.preventDefault()
        setData(data => ({...data, user_id: userId, user_name: userName}))
        setShouldSubmit(true);
        console.log('handleSubmit called')
    };

    // 其余代码保持不变
}

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