Next.js 数据获取 useSWR 还是使用 useEffect 的常规 fetch/axios？

Question

我正在学习 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 的普通提取？

Answer 1

就个人而言，我推荐使用useSWR开发人员推荐的 useSWR ； useEffect 是纯粹的反应钩子。

useSWR的逻辑很简单，不需要写很多代码。 此外，您还有很多选项参数作为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>
}