与 SWR 库的无效钩子调用

问题描述

我正在尝试使用带有反应钩子的 SWR library 执行删除请求。 我知道不能在 return() 内部调用钩子。但是如何在我的 react hook 项目中使用 useSWR 删除请求。谢谢

const page = () => {
    function onDelete(id) {
        const { data: deleted } = useSWR(`http://example.com/api/project/delete/${id}`,fetcher)
    }

    return (
        // some rendered component
        <Button 
            onClick={() => onDelete(project.id)}
            label="Delete"
        />
    )
}

错误：

解决方法

你不能在函数内部使用钩子，你可以使用条件获取。在这里检查 https://swr.vercel.app/docs/conditional-fetching

const page = () => {
  const [id,setId] = useState(null);
  const { data: deleted } = useSWR(
    id ? `http://example.com/api/project/delete/${id}` : null,fetcher
  );

  return (
    // some rendered component
    <Button onClick={() => setId(project.id)} label="Delete" />
  );
};