我有一个父组件名称“ 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 };