reactjs - 我应该如何在 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

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

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