在对表单使用绑定方法时，如何传递 total 的值？-解网

问：

我有这个表格，我想传递总计的值。

对于总数：我已经能够传递数组的值。cart

const [total, setTotal] = useState<number | undefined>(undefined);
  const calculateTotal = () => {
    return cart.reduce((total, item) => total + item.price * item.quantity, 0);
  };

  useEffect(() => {
    const calculatedTotal = calculateTotal();
    setTotal(calculatedTotal);
  },[cart])

const  addOrderInfo = addCustomerOrder.bind(null, cart)

在表单的返回函数中：

 <form action={addOrderInfo}>
   //input fields here
</form>

提交表格：

export default async function addCustomerOrder(cart: any, formData: FormData): Promise<{ message: string }> {    
    const cookieStore = cookies()
    const supabase = createServerActionClient({ cookies: () => cookieStore })
    console.log(formData, "formData")
    console.log(cart, "prev state")

    try{
       //rest of the data here
        return {  message: `Succesfully added the data` }
    }catch(e){
        return {message: "Failed to submit the form."}
    }

}

JavaScript ReactJS 打字稿形式 next.js

total是从状态项派生而来的，所以实际上，根本不应该使用。这样做“有效”，但是一种代码味道，因为您正在手动管理从其他状态计算的状态。如果您忘记保持它们同步，这往往会导致错误。是正确的工具。carttotaluseStateuseMemo

关于主要问题。没有必要做类似的事情，这不是你在 React 中做这种事情时通常看到的模式。您可以简单地定义一个包含额外信息的新闭包，并将其传递给主处理程序。addCustomerOrder.bind(null, cart)

将您发布的所有顶部区块替换为：

  const total = useMemo<number>(() => {
    const calculateTotal = () => {
      return cart.reduce((total, item) => total + item.price * item.quantity, 0);
    };

    return calculateTotal();
  }, [cart])

将表单包装替换为

 <form action={(data) => addCustomerOrder(cart, total, data)}>
   //input fields here
</form>

现在更改签名：addCustomerOrder

export default async function addCustomerOrder(cart: any, total: number, formData: FormData): Promise<{ message: string }> {

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

How can I pass the value of total when using bind method for the forms?

评论

评论