使用 Next.js 和 SWR 在按钮点击时触发数据请求_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

使用 Next.js 和 SWR 在按钮点击时触发数据请求

2025-10-08

浏览次数：次

返回列表

使用 next.js 和 swr 在按钮点击时触发数据请求

使用 Next.js 和 SWR 在按钮点击时触发数据请求

在 Next.js 应用中使用 SWR 进行数据获取非常方便，但直接在事件处理函数（如按钮点击事件）中使用 useSWR Hook 会导致 "Invalid hook call" 错误。这是因为 React Hooks 只能在函数组件或自定义 Hook 的顶层调用，而不能在条件语句、循环或嵌套函数中使用。

解决方案：利用 SWR 的条件请求

SWR 允许你通过传递 null 或 false 作为 key 来禁用请求。我们可以利用这个特性，结合一个状态变量来控制 useSWR 是否发起请求。

import useSWR from 'swr';
import { useState } from 'react';

const fetcher = async (url) => {
  const res = await fetch(url);
  if (!res.ok) {
    const error = new Error('An error occurred while fetching the data.');
    error.info = await res.json();
    error.status = res.status;
    throw error;
  }
  return res.json();
};

function MyComponent() {
  const [shouldFetch, setShouldFetch] = useState(false);

  const { data, error, isLoading } = useSWR(
    shouldFetch ? '/api/data' : null, // 当 shouldFetch 为 true 时才发起请求
    fetcher
  );

  const handleClick = () => {
    setShouldFetch(true); // 点击按钮时将 shouldFetch 设置为 true
  };

  if (error) return <div>Failed to load: {error.message}</div>;
  if (isLoading) return <div>Loading...</div>;

  return (
    <div>
      <button onClick={handleClick}>Fetch Data</button>
      {data && <div>Data: {JSON.stringify(data)}</div>}
    </div>
  );
}

export default MyComponent;

代码解释：

useState: 使用 useState 创建一个名为 shouldFetch 的状态变量，初始值为 false。
useSWR: useSWR 的 key 依赖于 shouldFetch 的值。只有当 shouldFetch 为 true 时，才会发起 /api/data 的请求。否则，useSWR 不会执行任何操作。
handleClick: 按钮的 onClick 事件处理函数 handleClick 将 shouldFetch 设置为 true，从而触发 useSWR 发起请求。
fetcher: 一个异步函数，负责实际的数据获取。

替代方案：使用 fetch 或 axios 直接获取数据

如果不想使用 SWR 的缓存和自动重试功能，可以直接使用 fetch 或 axios 在事件处理函数中获取数据。

青泥AI

青泥学术AI写作辅助平台

360 查看详情青泥AI

import { useState } from 'react';

function MyComponent() {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(null);

  const handleClick = async () => {
    setIsLoading(true);
    try {
      const res = await fetch('/api/data');
      if (!res.ok) {
        throw new Error('Failed to fetch data');
      }
      const jsonData = await res.json();
      setData(jsonData);
      setError(null);
    } catch (err) {
      setError(err);
      setData(null);
    } finally {
      setIsLoading(false);
    }
  };

  if (error) return <div>Failed to load: {error.message}</div>;
  if (isLoading) return <div>Loading...</div>;

  return (
    <div>
      <button onClick={handleClick}>Fetch Data</button>
      {data && <div>Data: {JSON.stringify(data)}</div>}
    </div>
  );
}

export default MyComponent;

代码解释：

useState: 使用 useState 管理数据 (data)、加载状态 (isLoading) 和错误 (error)。
handleClick: 按钮的 onClick 事件处理函数 handleClick 使用 fetch 发起 API 请求。
错误处理: 使用 try...catch 块来捕获请求过程中可能发生的错误，并更新 error 状态。
加载状态: 使用 setIsLoading 在请求开始前设置为 true，请求完成后设置为 false，以显示加载指示器。

注意事项：

确保你的 API 端点 /api/data 返回有效的 JSON 数据。
根据实际情况修改 fetcher 函数或 fetch 请求的配置，例如添加请求头、身份验证信息等。
如果需要更高级的错误处理，可以自定义错误对象并包含更多信息。

总结：

本教程介绍了两种在 Next.js 应用中，通过按钮点击事件触发数据请求的方法。第一种方法利用 SWR 的条件请求特性，避免了直接在事件处理函数中使用 Hook 的限制。第二种方法则直接使用 fetch 或 axios 发起请求，更加灵活，但需要手动处理缓存和重试等功能。选择哪种方法取决于你的具体需求和对 SWR 功能的依赖程度。

以上就是使用 Next.js 和 SWR 在按钮点击时触发数据请求的详细内容，更多请关注其它相关文章！

# 有何不同 # 网站seo关键词排名优化软件 # 武汉网站推广微馨hfqjwl # 清溪服装网站推广报价 # 黄石seo排名技巧 # 芙蓉区微博营销推广公司 # 石家庄红酒公司网站建设 # 如何做京东网站推广 # qq代刷网推广免费网站520 # 阜新外贸网站推广哪家好 # 朝阳区电商网站推广分类 # 能在 # 两种 # 才会 # react # 重试 # 如何实现 # 服务端 # 加载 # 设置为 # 自定义 # red # 点击事件 # ios # ai # axios # json # js

相关栏目：【科技资讯46185 】【网络学院92790 】

上一篇：Lar*el路由参数缺失问题解析与最佳实践

下一篇：CSS布局技巧：确保父元素高度随子元素内容自适应

首页

关于我们

产品展示

咨询研究

新闻中心

留言板

联系我们

新闻中心 NEWS CENTER

使用 Next.js 和 SWR 在按钮点击时触发数据请求

使用 Next.js 和 SWR 在按钮点击时触发数据请求