英文:
React Hook "useSWR" is called conditionally. React Hooks must be called in the exact same order in every component render
问题
我的页面从前一个页面接收参数，并使用useSWR根据这些参数来获取数据：
export default function Model() {
const searchParams = useSearchParams();
const selectedMatch = searchParams.get("data")
if (selectedMatch == "") {
return <p>未找到数据</p>;}
const { data, error, isLoading } = useSWR(["api/model", selectedMatch], fetcher)
return (...)
}
似乎React钩子useSWR必须位于组件的顶部，位于任何return和条件之前。但是，我想在将selectedMatch传递给useSWR之前处理空的情况，该如何处理？
英文:
My page receives parameters from the previous page and uses useSWR to fetch the data base on the parameters:
export default function Model() {
const searchParams = useSearchParams();
const selectedMatch = searchParams.get("data")
if (selectedMatch == "") {
return <p>no data is found</p>}
const { data, error, isLoading } = useSWR(["api/model", selectedMatch], fetcher)
return (...)
}
It seems that react hooks useSWR must be on top of the component before any return and condition, however, I want to handle the empty case of selectedMatch before passing to useSWR, how can I do it?
答案1
得分: 1
这里的障碍是 `useSWR` 是一个钩子，不能有条件地调用，但 [SWR](https://swr.vercel.app/docs/getting-started) 提供了一些关于使用 `useSWR` 的技巧，比如 [条件获取](https://swr.vercel.app/docs/conditional-fetching)。
> 使用 `null` 或将函数作为键来有条件地获取数据。如果函数抛出异常或返回假值，SWR 将不会启动请求。
```js
// 有条件地获取数据
const { data, error, isLoading } = useSWR(selectedMatch ? ['api/model', selectedMatch] : null, fetcher);
// ...或返回假值
const { data, error, isLoading } = useSWR(() => selectedMatch ? ['api/model', selectedMatch] : null, fetcher)
你可以这样做，然后根据 data 的值来决定返回什么。
<details>
<summary>英文:</summary>
The obstacle here is that `useSWR` is a hook and cannot be called conditionally but [SWR](https://swr.vercel.app/docs/getting-started) provides, let's say, some tricks with useSWR as [Conditional Fetching](https://swr.vercel.app/docs/conditional-fetching)
>Use `null` or pass a function as key to conditionally fetch data. If the function throws or returns a falsy value, SWR will not start the request.
```js
// conditionally fetch
const { data, error, isLoading } = useSWR(selectedMatch ? ['api/model', selectedMatch] : null, fetcher);
// ...or return a falsy value
const { data, error, isLoading } = useSWR(() => selectedMatch? ["api/model", selectedMatch] : null, fetcher)
you can do that and based on the value of data you decide what to return
答案2
得分: 0
你可以在不想获取数据时，将 key 参数传递为 null 给 useSWR 钩子：
export default function Model() {
const searchParams = useSearchParams();
const selectedMatch = searchParams.get('data');
const { data, error, isLoading } = useSWR(selectedMatch ? ['api/model',
selectedMatch] : null, fetcher);
return (...)
}
英文:
You can pass null as the key to the useSWR hook when you don't want to fetch:
export default function Model() {
const searchParams = useSearchParams();
const selectedMatch = searchParams.get('data');
const { data, error, isLoading } = useSWR(selectedMatch ? ['api/model',
selectedMatch] : null, fetcher);
return (...)
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论