useState 不更新状态

Question

我在下面的代码中更改了 isDeleting 的状态。此状态用于显示删除按钮上的微调器。删除任务完成后，此状态将更改为 false

const { deleteExpense } = apiExpenses();
const [isDeleting, setIsDeleting] = useState(false)


const handleDeleteCompleted =  () => {
    setIsDeleting(true)
    
    const response = deleteExpense(fetchExpenseId);

    if(response) {
      setOpenConfirmDelete(false);
      setIsDeleting(false)
    }
};

\\in JSX

<ButtonError
onClick={handleDeleteCompleted}
size="large"
sx={{
  mx: 1,
  px: 3,
}}
variant="contained"
startIcon={
  isDeleting ? <CircularProgress size="1rem" /> : null
}
disabled={isDeleting}
>
{t("Delete")}
</ButtonError>

当 handleDeleteCompleted 函数运行时，它不会更改 isDeleting 的状态，并且如果我始终对其进行控制台保持false。它还运行 deleteExpense 函数。

因此，旋转器永远不会弹出。

这里出了什么问题？

Answer 1

deleteExpense() 应该是一个 async 函数吗？在您当前的示例中，您将其视为同步函数。这导致设置 setIsDeleting(true) 和 setIsDeleting(false) 之间没有时间，因为 React 在这些操作同步发生时将其捆绑在一起，后者会覆盖前者，并且您可以从未真正调用setIsDeleting(true)。

要解决此问题，请尝试使您的函数异步

const handleDeleteCompleted = async() => {
    setIsDeleting(true)
    
    const response = await deleteExpense(fetchExpenseId);

    if(response) {
      setOpenConfirmDelete(false);
      setIsDeleting(false)
    }
};