React useState不会立即更新

时间:2020-10-28 14:40:41

标签: reactjs react-redux react-hooks react-hook-form redux-react-hook

我有一个父组件名称“ CreateInvoice”和一个子组件名称“ InvoiceInnerForm”。在子组件中,我有一个复杂的表格。

场景是

为创建发票,我创建了一个空对象,其设置为

const [invoice, setInvoice] = useState<IInvoice>({ ...DeepCopy(DefaultInvoiceState)});

,并且工作正常。对于更新情况,我正在尝试在useEffect中设置发票状态。在下面的代码中,我已经在useEffect方法中创建了一个对象并尝试设置状态,但是它没有反映出更改。

我是React-hooks的初学者。谁能指导我为什么它没有反映出变化。

const CreateInvoice: React.FC<Props> = (props) => {
const [invoice, setInvoice] = useState<IInvoice>({ ...DeepCopy(DefaultInvoiceState)});

useEffect(() => {
   // only set for update case  
   const obj: IInvoice = {
       invoiceId: 1,
       invoiceCreatedDate: new Date(),
        salesMan: {
             id: "c94eb8c8-5b5d-4e36-a55e-9d1b7b2fc70c",
              name: "Shoaib Nazir",
        },
        customer: {
             id: 1,
             mobile: "03137864714",
             name: "Noor Baker",
             route: { id: 1, name: "Railway Road" },
        },
        product: { id: 0, name: "" },
        quantity: 0,
        discount: 0,
        bouns: 0,
        unitPrice: 0,
        discountInPercentage: 0,
        total: 0,
       items: [{
               bouns: 0,
               discount: 0,
               discountInPercentage: 0,
                product: { id: 1, name: "Pepsi" },
               quantity: 2,
               total: 240,
              unitPrice: 120,
        }],
       subTotal: 480,
       totalDiscount: 0,
       totalPayableAmount: 480,
       paidAmount: 0,
       unPaidAmount: 480,
    };
    setInvoice(obj);
   }, []);

 return (    
     <InvoiceInnerForm
        invoice={invoice}
      ></InvoiceInnerForm>
  );
};

export { CreateInvoice };

0 个答案:

没有答案