时间戳

首页 > 解决方案 > 反应 setState 钩子更新一个先前的值

javascript - 反应 setState 钩子更新一个先前的值

问题描述

我有反应js和asp.net核心应用程序，onform提交我正在尝试填写一些主数据和详细数据（在aray中）。问题是，setState更新了一个先前的值，当我按两次提交按钮时，我的后端 asp.net web api 方法被命中。任何人都可以告诉我更新状态的正确方法是什么，以便我可以在第一次点击时提交正确的数据。我正在从 handleSubmit 函数调用另一个函数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 设置值，但第一次单击它显示空数组，第二次单击它显示必须第一次填充的值。

标签： javascriptreactjssetstate

解决方案

解决方案

只需使用捕获值更改useEffect

  • 我values在 useEffect 中传递了 as 依赖项。
  • 因此，您将获得的最新更新值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]                
    });
}

推荐阅读