Question

我有一个订单管理系统-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)

Answer 1

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

使用下面的表达式可以解决您的问题吗？

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

然后您可以设置状态

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

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

1 个答案: