next.js 如何在使用bind方法时传递total的值？

dojqjjoe 于 2023-11-18 发布在其他

关注(0)|答案(1)|浏览(75)

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

**对于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."}
    }

}

型

next.js

来源：https://stackoverflow.com/questions/77464215/how-can-i-pass-the-value-of-total-when-using-bind-method-for-the-forms

1条答案

按热度按时间

wqsoz72f1#

在找到问题的根源之前，这里有一些东西需要清理，这将有所帮助。
total是从状态项cart派生的，所以实际上，total根本不应该使用useState。这样做“工作”，但当你手动管理从其他状态计算的状态时，这是一种代码气味。如果你忘记保持它们同步，这往往会导致错误。useMemo是正确的工具。
回到主要的问题上。没有必要做像addCustomerOrder.bind(null, cart)这样的事情，这不是你在React中做这类事情时通常看到的模式。你可以简单地定义一个新的闭包，其中包括额外的信息，并将其传递给主处理程序。
将您发布的顶部区块的 all 替换为：

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

    return calculateTotal();
  }, [cart])

字符串
将窗体 Package 替换为

<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 }> {

型

赞(0）回复(0）举报 2023-11-18

我来回答

next.js 如何在使用bind方法时传递total的值？

1条答案

相关问题

热门标签

最新问答