Next.js 数据获取 useSWR 或常规 fetch/axios with useEffect?
Next.js data fetching useSWR or regular fetch/axios with useEffect?
我正在学习 Next.js 并希望根据用户输入的查询显示数据。
我想利用 Next 的功能,但我不确定 useSWR 是否是处理此问题的正确方法,因为我找不到我正在尝试做的任何示例。
我的代码如下所示:
export default function SearchBar() {
const [query, setQuery] = useState("");
const [address, setAddress] = useState("");
const fetcher = async (url) => await axios.get(url).then((res) => res.data);
const { data, error } = useSWR(address, fetcher);
const handleSubmit = (e) => {
setAddress(`https://jsonplaceholder.typicode.com/todos/${query}`);
e.preventDefault();
};
if (error) return <div>ERROR</div>;
return (
<>
<Form onSubmit={handleSubmit}>
<Input
type="text"
onChange={(e) => setQuery(e.target.value)}
value={query}
/>
<SearchButton type="submit">Search</SearchButton>
</Form>
</>
);
}
这是 useSWR 的正确用法,还是我应该使用 useEffect 进行正常提取?
就我个人而言,我建议使用 useSWR
,因为它是 recommended by Next.js developers; useEffect 是纯粹的反应钩子。
useSWR的逻辑很简单,不需要写很多代码。此外,你有很多 option params 作为 revalidateOnRender
这将在开发中非常有用。
来自文档的示例:
function Profile() {
const { data, error } = useSWR('/api/user')
if (error) return <div>failed to load</div>
if (!data) return <div>loading...</div>
return <div>hello {data.name}!</div>
}
我正在学习 Next.js 并希望根据用户输入的查询显示数据。 我想利用 Next 的功能,但我不确定 useSWR 是否是处理此问题的正确方法,因为我找不到我正在尝试做的任何示例。
我的代码如下所示:
export default function SearchBar() {
const [query, setQuery] = useState("");
const [address, setAddress] = useState("");
const fetcher = async (url) => await axios.get(url).then((res) => res.data);
const { data, error } = useSWR(address, fetcher);
const handleSubmit = (e) => {
setAddress(`https://jsonplaceholder.typicode.com/todos/${query}`);
e.preventDefault();
};
if (error) return <div>ERROR</div>;
return (
<>
<Form onSubmit={handleSubmit}>
<Input
type="text"
onChange={(e) => setQuery(e.target.value)}
value={query}
/>
<SearchButton type="submit">Search</SearchButton>
</Form>
</>
);
}
这是 useSWR 的正确用法,还是我应该使用 useEffect 进行正常提取?
就我个人而言,我建议使用 useSWR
,因为它是 recommended by Next.js developers; useEffect 是纯粹的反应钩子。
useSWR的逻辑很简单,不需要写很多代码。此外,你有很多 option params 作为 revalidateOnRender
这将在开发中非常有用。
来自文档的示例:
function Profile() {
const { data, error } = useSWR('/api/user')
if (error) return <div>failed to load</div>
if (!data) return <div>loading...</div>
return <div>hello {data.name}!</div>
}