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

【问题标题】：React hooks useState submit on second time from child componentReact hooks useState 第二次从子组件提交
【发布时间】：2020-07-09 03:50:55
【问题描述】：

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

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

从阅读中我了解到这是添加到 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)

【问题讨论】：

标签： reactjs react-hooks use-state

【解决方案1】：

是否需要在 post 请求之前设置状态？

下面的表达式能解决你的问题吗？

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

之后你可以设置状态

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

【讨论】：

是的，这绝对是这样做的方式 - 谢谢！