React中依赖deletePost的useEffect首次渲染触发，删除请求异常

第二个useEffect在组件挂载时就触发，是因为React的useEffect会在组件首次渲染后执行一次，无论依赖项的初始值是什么。你的deletePost初始值是false，它作为依赖项存在，所以组件挂载后这个effect会立即执行，此时blogData还没加载完成，_id未定义，导致DELETE请求失败。

1. 在删除effect中添加条件判断 #

只有当deletePost为true时才执行删除逻辑，避免初始挂载时触发：

useEffect(() => {
  // 仅当deletePost为true时执行删除
  if (!deletePost) return;

  // 先检查文章数据是否已加载完成
  if (!blogData._id) {
    console.log("文章数据尚未加载，无法执行删除");
    return;
  }

  // 修复URL：移除末尾多余的"}"
  const str = "https://reactblogapp-52d2.restdb.io/rest/excel-blog/" + blogData._id;
  console.log(str);

  const deleteFunction = async () => {
    const response = await fetch(str, {
      method: 'DELETE',
      headers: {
        'Cache-Control': "no-cache",
        'x-apikey': '63d53b073bc6b255ed0c43c2',
        'content-type': 'application/json'
      }
    });

    if (!response.ok) {
      console.log("删除请求失败！");
      navigate("/notfound");
    } else {
      const res = await response.json();
      if (res.result === 0) {
        alert("当前无法删除该文章，抱歉！");
      } else {
        // 删除成功后跳转到列表页或其他页面
        navigate("/");
      }
    }
    // 重置状态，避免重复触发删除逻辑
    setDeletePost(false);
  };

  deleteFunction().catch(error => console.log("删除出错：", error));
}, [deletePost, blogData._id, navigate]);

2. 完善依赖项数组 #

将blogData._id和navigate添加到依赖数组中，确保effect能正确响应这些值的变化，同时符合React Hooks的规则。

3. 优化逻辑：直接在点击事件中执行删除 #

你可以去掉deletePost状态变量，直接在按钮点击事件中调用删除函数，逻辑更直观且不会出现初始触发问题：

const handleDelete = async () => {
  if (!blogData._id) {
    console.log("文章数据未加载完成");
    return;
  }

  const str = "https://reactblogapp-52d2.restdb.io/rest/excel-blog/" + blogData._id;
  try {
    const response = await fetch(str, {
      method: 'DELETE',
      headers: {
        'Cache-Control': "no-cache",
        'x-apikey': '63d53b073bc6b255ed0c43c2',
        'content-type': 'application/json'
      }
    });

    if (!response.ok) {
      console.log("删除失败");
      navigate("/notfound");
    } else {
      const res = await response.json();
      if (res.result === 0) {
        alert("当前无法删除该文章");
      } else {
        navigate("/");
      }
    }
  } catch (error) {
    console.log("删除出错：", error);
  }
};

// 按钮部分修改为：
<button onClick={handleDelete}>Delete this post</button>

内容的提问来源于stack exchange，提问作者GD1