reactjs - 使用 SWR 库的无效挂钩调用

Question

我正在尝试使用SWR librarywith react 钩子执行删除请求。我知道不能在 return() 中调用钩子。但是如何在我的反应钩子项目中使用 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"
        />
    )
}

错误 ：

Answer 1

你不能在函数内部使用钩子，你可以使用条件获取。在这里查看 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" />
  );
};