使用bind方法绑定表单时，如何传递total值？

AI 小北

2026-7-6

解决方法：通过`bind`传递多个参数

你只需要调整bind的参数列表，把total也作为前置参数绑定，同时对应修改服务器action的参数顺序即可：

修改组件中的绑定逻辑
把原来的bind语句改成同时传入cart和total：

const addOrderInfo = addCustomerOrder.bind(null, cart, total);

调整服务器Action的参数定义
让函数参数顺序和绑定的参数对应，最后接收formData：

export default async function addCustomerOrder(
  cart: any, 
  total: number | undefined, 
  formData: FormData
): Promise<{ message: string }> {    
    const cookieStore = cookies()
    const supabase = createServerActionClient({ cookies: () => cookieStore })
    console.log(formData, "formData")
    console.log(cart, "prev state")
    console.log(total, "order total") // 现在可以拿到total值了

    try{
       // 这里可以直接使用total做后续逻辑
        return {  message: `Succesfully added the data` }
    }catch(e){
        return {message: "Failed to submit the form."}
    }
}

另一种可选方案：用隐藏表单字段传递

如果不想修改函数参数，也可以把total作为隐藏输入框嵌入表单，这样提交时会自动包含在formData中：

<form action={addOrderInfo}>
   // 其他input fields here
   <input type="hidden" name="orderTotal" value={total || 0} />
</form>

然后在服务器Action中读取：

export default async function addCustomerOrder(cart: any, formData: FormData): Promise<{ message: string }> {    
    // ...
    const total = Number(formData.get('orderTotal'));
    console.log(total, "order total");
    // ...
}