如何解决下一个 js 在点击和获取结果时将 id 发送到 API 路由
当我点击组件内的按钮时,我通过函数 id
将 const readUrl
发送回页面,现在我尝试将 id
发送给客户端/api/dat/[id].js
路由,其中基本上在 mongodb 中搜索该 id,然后 res.send
返回页面的 JSON 结果。
因此,通过 SWR,我正在处理 API 路由客户端,并使用两个 useState
来处理来自按钮单击的 id 和来自 API 的结果以将其传递给 react DOM
问题是我得到:
错误:重新渲染过多。 React 限制渲染次数以防止无限循环。
这是我的api/dat/[id].js
:
import { connectToDatabase } from "../../utils/mongodb"
export default async function ({ query: { id } },res) {
const { db } = await connectToDatabase();
const dataID = id
const foundData = /* query to mongodb.toArray() */
if (foundData.length) {
res.status(200).send({ data: foundData[0] })
} else {
res.status(404).json({ message: `Data ${id} not found.` })
}
res.end()
}
const [urlNow,setUrlNow] = useState(null);
const [urlData,setUrlData] = useState(null);
const readUrl = (url) => {
setUrlNow(url)
return true
}
const fetcher = (...args) => fetch(...args).then(res => res.json())
const { data,error } = useSWR(readUrl ? `/api/dat/${urlNow}` : null,fetcher)
// if (error) return <div>{error.message}</div>
// if (!data) return <div>Loading...</div>
if (data) setUrlData(data.data)
return (
...
{urlData
? <Component data={urlData} />
: <ComponentWithButton readUrl={readUrl} />
}
上面设置的 useSWR
仅在函数 readUrl
返回 true
时才会启动,正如 SWR 文档所说,所以我认为它应该只在按钮被点击时获取 API 路由,至少是那个想法。
解决方法
为了留下评论中提到的问题的完整解决方案而添加答案。
您应该替换 useSwr()
中的条件以使用 urlNow
而不是 readUrl
函数。还可以清理一些状态/变量以使代码更简单。
const [urlNow,setUrlNow] = useState(null);
const readUrl = (url) => {
setUrlNow(url)
}
const fetcher = (...args) => fetch(...args).then(res => res.json())
const { data,error } = useSWR(urlNow ? `/api/dat/${urlNow}` : null,fetcher)
// if (error) return <div>{error.message}</div>
// if (!data) return <div>Loading...</div>
return (
{data
? <Component data={data} />
: <ComponentWithButton readUrl={readUrl} />
}
//...
)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。