反應 setState 鈎子更新一個先前的值

Question

我已經反應 js 和 asp.net 核心應用程序，onform 提交我正在嘗試填寫一些主數據和詳細數據（在 aray 中）。 問題是， setState更新了一個先前的值，當我按下提交按鈕兩次時，我的后端 asp.net web api 方法被擊中。 任何人都可以告訴我更新 state 的正確方法是什么，以便我可以在第一次點擊時提交正確的數據。 我正在從 handleSubmit function 調用另一個 function addDetailItem來使用 setState 鈎子填充數組。

<form autoComplete="off" noValidate onSubmit = {handleSubmit}  >

const handleSubmit = (e) => {
    e.preventDefault();
    
    if(validateForm()){
        addDetailItem(); 
        props.createPaymentVoucher(values);
    }               
    console.log(values);                
}

const addDetailItem = () => {            
    let x = {
        voucherMasterId:values.voucherMasterId,
        voucherDetailId:0,                
        accountCode: values.creditAccountCode,
        debit: 0,
        credit: values.creditAmount,
        remarks: values.fromRemarks,
        status: ""
    }
    setValues({
        ...values,
        voucherDetails: [...values.voucherDetails, x]                
    });
    console.log('voucherDetails: ', values.voucherDetails);
}

這里 setValues 設置值，但第一次單擊它顯示空數組，第二次單擊它顯示必須第一次填充的值。

Answer 1

解決方案

只需使用useEffect捕獲值更改

• 我在 useEffect 中將values作為依賴項傳遞。
• 因此，您將獲得最新更新的values
• 現在每當values發生任何變化時，它都會調用props.createPaymentVoucher

useEffect(() => {
   props.createPaymentVoucher(values);
}, [values])

const handleSubmit = (e) => {
    e.preventDefault();        
    if(validateForm()){
        addDetailItem(); 
    }                            
}

const addDetailItem = () => {            
    let x = {
        voucherMasterId:values.voucherMasterId,
        voucherDetailId:0,                
        accountCode: values.creditAccountCode,
        debit: 0,
        credit: values.creditAmount,
        remarks: values.fromRemarks,
        status: ""
    }
    setValues({
        ...values,
        voucherDetails: [...values.voucherDetails, x]                
    });
}

Answer 2

setState 是異步的 function 因此當您在更新后立即嘗試使用 state 時，它將始終返回以前的值。

因此，不要立即使用 state 值，您可以使用useEffect或針對您的特定用例遵循以下解決方案。

嘗試：-

const newValues = { ...values, voucherDetails: [...values.voucherDetails, x]};
setValues({ ...newValues });
return newValues;

現在您可以在您的句柄提交handleSubmit中訪問您的值，如下所示

const updatedValues = addDetailItem();