如何在可复用函数中使用useNavigate？遇Invalid hook call问题

错误原因 #

你遇到的Invalid hook call错误，核心是违反了React Hook的使用规则：

• React Hook（比如useNavigate）只能在React函数组件的顶层或者**自定义Hook（必须以use开头命名）**内部调用，绝对不能在普通的异步/同步函数里直接调用。
• 你的UpdateTrashcan是一个普通异步函数，直接在里面调用useNavigate(0)完全不符合Hook的调用规则，因此触发了报错。

方案1：将navigate函数作为参数传入（推荐，保持函数纯业务逻辑） #

把组件中通过useNavigate获取到的navigate函数，作为参数传给UpdateTrashcan，这样函数不需要自己调用Hook，同时保留可复用性。

修改后的UpdateTrashcan函数：

export async function UpdateTrashcan(messagedata, itemID, folder, navigate) {
    await fetch(
        "url/trashcan/" + itemID + ".json",
        {
            method: "PUT",
            body: JSON.stringify(messagedata),
            headers:{
                "Content-Type": "application/json"
            }
        }
    );
    await fetch(
        "url/" + folder + "/" + itemID + ".json",
        {   
            method: "DELETE",
            headers:{
                "Content-Type": "application/json"
            }
        }
    );
    navigate(0); // 使用传入的navigate函数刷新页面
}

注意：DELETE请求通常不需要body参数，这里可以删掉body: JSON.stringify(messagedata)，避免冗余。

在React组件中调用：

import { useNavigate } from "react-router-dom";
import { UpdateTrashcan } from "./你的文件路径";

function YourComponent() {
  const navigate = useNavigate();

  const handleMoveToTrash = async () => {
    // 替换成你的实际参数
    await UpdateTrashcan(messagedata, itemID, folder, navigate);
  };

  return <button onClick={handleMoveToTrash}>移至回收站</button>;
}

方案2：封装成自定义Hook #

如果这个函数和React的Hook逻辑绑定紧密，可以把它改成自定义Hook（必须以use开头命名），这样就能在内部合法调用useNavigate。

自定义Hook实现：

import { useNavigate } from "react-router-dom";

export function useUpdateTrashcan() {
  const navigate = useNavigate();

  const update = async (messagedata, itemID, folder) => {
    await fetch(
        "url/trashcan/" + itemID + ".json",
        {
            method: "PUT",
            body: JSON.stringify(messagedata),
            headers:{
                "Content-Type": "application/json"
            }
        }
    );
    await fetch(
        "url/" + folder + "/" + itemID + ".json",
        {   
            method: "DELETE",
            headers:{
                "Content-Type": "application/json"
            }
        }
    );
    navigate(0);
  };

  return update;
}

在组件中使用：

import { useUpdateTrashcan } from "./你的文件路径";

function YourComponent() {
  const updateTrashcan = useUpdateTrashcan();

  const handleMoveToTrash = async () => {
    await updateTrashcan(messagedata, itemID, folder);
  };

  return <button onClick={handleMoveToTrash}>移至回收站</button>;
}

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