过滤一些数据后另一个 React 状态未更新

Question

我的 React 应用程序遇到问题，成功删除操作后状态 (deleteSuccess) 未更新。

我有一个函数handleDeleteSubmit，当用户删除项目时会触发该函数。在此函数内，我调用 API 来删除该项目。成功删除后（data.error为假），我将deleteSuccess状态设置为true。然而，即使删除成功，deleteSuccess 仍然是 false。

const handleDeleteSubmit = async () => {
  if (!accessToken) {
    return;
  }
  try {
    const response = await fetch(
      apiPath.newsletterApi.deleteNewsLetter(newsletter.location.content_id),
      {
        method: "GET",
        headers: {
          Authorization: `Bearer ${accessToken}`,
          "Content-Type": "application/json",
        },
      }
    );
    const data = await response.json();
    if (!data.error) {
      console.log("deleted successful:", data);
      setDeleteSuccess(true);
      let cp = currentNewsletters!.filter(
        (news) => news.location.content_id !== newsletter.location.content_id
      );
      setCurrentNewsletters!(cp);
      handleDeleteClose();
    } else {
      setDeleteError(true);
      console.error("Failed to delete:", data);
    }
  } catch (error) {
    setDeleteError(true);
    console.error("Error deleting:", error);
  }
};

尽管将 deleteSuccess 设置为 true，但它仍然记录为 false。 currentNewsletter 只是来自 props 的数据数组。

任何解决此问题的帮助将不胜感激。谢谢！

如果我注释掉这部分，代码就可以正常工作，

setDeleteSuccess(true);
      let cp = currentNewsletters!.filter(
        (news) => news.location.content_id !== newsletter.location.content_id
      );
      setCurrentNewsletters!(cp);

像这样

if (!data.error) {
        console.log("deleted successful:", data);

        // let cp = currentTemplate!.filter(
        //   (temp) => temp.location.content_id !== template.location.content_id
        // );
        // setCurrentTemplate!(cp);
        // Perform any actions after successful update
        setDeleteSuccess(true);
        console.log(deleteSuccess);
        handleDeleteClose();

Answer 1

这是因为

useState

调度程序默认是异步的。所以你的状态只会在下一次重新渲染时更新（你可以看到更新后的值）。

参考：https://react.dev/reference/react/useState#ive-updated-the-state-but-logging-gives-me-the-old-value

因此，在不知道函数或组件内状态的用例是什么的情况下，我无法建议更好的方法。