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 路由,至少这是想法。