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).

要解决此问题，请尝试创建函数 async

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

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

useState 不更新状态

useState not updating state

reactjs

use-state