使用 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 Failed to load: {error.message}; if (isLoading) return Loading...; return ( {data && Data: {JSON.stringify(data)}} );}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 在事件处理函数中获取数据。
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 Failed to load: {error.message}; if (isLoading) return Loading...; return ( {data && Data: {JSON.stringify(data)}} );}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 在按钮点击时触发数据请求的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1527732.html
微信扫一扫 
支付宝扫一扫 
