如何立即更新 React setState

Posted 2023-03-17

【中文标题】如何立即更新 React setState

【英文标题】：How to update React setState immediately

【发布时间】：2021-08-18 00:51:55

【问题描述】：

我在“onClick”事件上调用 AddItemToList()。 但是，由于 setTotalExpensesAmount() 是异步的，因此调用太晚，并且 axios.post() 将不正确的 totalExpenses 值发送到数据库（前一个）。

我相信，在 AddItemToList() 函数之外使用 useEffect() 不是正确的解决方案。

我应该让 axios.post() 成为 setTotalExpensesAmount() 的回调吗？如果是这样，我该怎么做？

const AddItemToList = () => 
        if (Expense !== '' && Amount !== '' && Number(Amount) > 0) 
            setExpenseAndAmountList(
                [
                    ...expenseAndAmountList, 
                     
                        expenseTitle: Expense,
                        expenseAmount: Amount,
                        id: Math.random() * 1000
                    
                ]
            );

            axios.post('http://localhost:4000/app/insertedExpenseAndAmount', 
            
                expenseTitle: Expense,
                expenseAmount: Amount
            );
            
            setTotalExpensesAmount((currentTotalExpenses: number) => currentTotalExpenses + Number(Amount));

            axios.post('http://localhost:4000/app/totalexpensesamount', 
            
                totalExpensesAmount: totalExpenses
            );
            
            setExpense("");
            setAmount("");
            setIfNotValidInputs(false);
            setTotalBalance(Number(income) - totalExpenses);
         else 
            setIfNotValidInputs(true);
        
    

【问题讨论】：

您可以将 AddItemToList() 设置为异步函数，然后等待（使用 await 关键字）完成 setTotalExpensesAmount。

【参考方案1】：

有两种方法可以做到这一点。

您可以计算newTotalExpense 并使用新值执行setTotalExpense。另外，请在您正在拨打的电话中传递newTotalExpense。

    const AddItemToList = () => 
        if (Expense !== '' && Amount !== '' && Number(Amount) > 0) 
            setExpenseAndAmountList(
                [
                    ...expenseAndAmountList, 
                     
                        expenseTitle: Expense,
                        expenseAmount: Amount,
                        id: Math.random() * 1000
                    
                ]
            );

            axios.post('http://localhost:4000/app/insertedExpenseAndAmount', 
            
                expenseTitle: Expense,
                expenseAmount: Amount
            );

            const newTotalExpense = currentTotalExpenses + Number(Amount)
            setTotalExpensesAmount(newTotalExpense);

            axios.post('http://localhost:4000/app/totalexpensesamount', 
            
                totalExpensesAmount: newTotalExpense
            );
            
            setExpense("");
            setAmount("");
            setIfNotValidInputs(false);
            setTotalBalance(Number(income) - totalExpenses);
         else 
            setIfNotValidInputs(true);
        
    

您可以使用useEffect 钩子，它会在totalExpense 值的变化时触发。您可以在useEffect 内拨打电话。

    useEffect(() => 
        axios.post('http://localhost:4000/app/totalexpensesamount', 
        
            totalExpensesAmount: totalExpenses
        );        
    , [totalExpense])
    
    const AddItemToList = () => 
        if (Expense !== '' && Amount !== '' && Number(Amount) > 0) 
            setExpenseAndAmountList(
                [
                    ...expenseAndAmountList, 
                     
                        expenseTitle: Expense,
                        expenseAmount: Amount,
                        id: Math.random() * 1000
                    
                ]
            );

            axios.post('http://localhost:4000/app/insertedExpenseAndAmount', 
            
                expenseTitle: Expense,
                expenseAmount: Amount
            );
            
            setTotalExpensesAmount((currentTotalExpenses: number) => currentTotalExpenses + Number(Amount));

            setExpense("");
            setAmount("");
            setIfNotValidInputs(false);
            setTotalBalance(Number(income) - totalExpenses);
         else 
            setIfNotValidInputs(true);
        
    

【讨论】：

这成功了！非常感谢您的好建议