我应该如何在Next js中获取onClick数据？

Question

我有一个输入字段，旁边有一个按钮。我想在客户端按下按钮时获取数据。

我使用了SWR（我不确定是否必须使用SWR或getServerSideProps方法）

问题是当我刷新页面时它会获取数据。

这是我的代码：

const fetcher = async () => {
    const res = await fetch(
      'https://eu-central-1.aws.webhooks.mongodb-realm.com/api/client/v2.0/app/lottigully-jjrda/service/movies/incoming_webhook/movies?arg=dexter'
    );
    const data = await res.json();
    return data;
  };

  const { data, error } = useSWR('uk', fetcher);
  if (error) {
    return 'there was an error';
  }
  if (!data) {
    return 'Loading';
  }

  console.log(data);


  return (
    <>
      <main>
        <div className={style.main_container}>
          <NavBar />
          <Hero />
        </div>
        <div className={style.search_container}>
          <SearchBar
            onChange={(e) => {
              setSearchTerm(e.target.value);
              console.log(searchTerm);
            }}
          />
        </div>
    <button onClick={?????}>Search!</button>

      </main>
    </>
  );
}

Answer 1

您应该调用返回您的mutate函数useSWR。

const fetcher = async () => {
    const res = await fetch(
      'https://eu-central-1.aws.webhooks.mongodb-realm.com/api/client/v2.0/app/lottigully-jjrda/service/movies/incoming_webhook/movies?arg=dexter'
    );
    const data = await res.json();
    return data;
  };

  const { data, mutate, error } = useSWR('uk', fetcher);
  if (error) {
    return 'there was an error';
  }
  if (!data) {
    return 'Loading';
  }

  console.log(data);


  return (
    <>
      <main>
        <div className={style.main_container}>
          <NavBar />
          <Hero />
        </div>
        <div className={style.search_container}>
          <SearchBar
            onChange={(e) => {
              setSearchTerm(e.target.value);
              console.log(searchTerm);
            }}
          />
        </div>
    <button onClick={() => mutate()}>Search!</button>

      </main>
    </>
  );
}

请检查此链接https://swr.vercel.app/docs/mutation