React hooks useState 第二次从子组件提交

Question

我有一个订单管理系统 - Order.js page with Child Component ProductsForm.js

填写表格以将产品添加到订单时，我使用 onChange 更新 useState 的详细信息
点击提交时-如果没有填写价格，我会根据产品信息更新价格并提交
第一次提交 - 它发送 post 没有价格的请求
第二次点击提交 - 它发送 post 带有正确价格的请求

通过阅读，我了解到它是添加到 useState 或将其转换为 useEffect 的东西？我可以有多个 useEffect 吗？

我该如何解决这个问题？ - 谢谢！

const submitOrderProduct = () => {

        if (subProductDetails.final_price === '')
            console.log('PRICE Not Set, Update Price from Product Info..')
            setSubProductDetails(subProductDetails => ({...subProductDetails,
                final_price: selectedItemDetails.final_price}))

     >>>>>>>>>>>>   HERE Need to Refresh / Callback Something  <<<<<<<<<<<<<

        const subProduct = {
            order: subProductDetails.order,
            product: subProductDetails.product,
            sub_product: subProductDetails.sub_product,
            units_to_buy: parseInt(subProductDetails.sub_units_to_buy),
            final_price: parseFloat(subProductDetails.final_price),
            unit_cost_before_fees: parseFloat(subProductDetails.unit_cost_before_fees),
            discount: parseInt(subProductDetails.sub_discount),
            notes: subProductDetails.sub_notes,
        }

        axios.post('http://127.0.0.1:8000/api/orderProducts/', subProduct)

Answer 1

您需要在 post 请求之前设置状态吗？

使用以下表达式是否可以解决您的问题？

final_price: subProductDetails.final_price !== ""
             ? parseFloat(subProductDetails.final_price)
             : selectedItemDetails.final_price

之后您可以设置状态

setSubProductDetails(...subProductDetails, final_price: subProduct.final_price)

React hooks useState 第二次从子组件提交

React hooks useState submit on second time from child component

reactjs

react-hooks

use-state