我可以通过 onClick 更改 getServerSideProps 获取 url

Question

我可以通过 onClick 更改 getServerSideProps 获取 url

我想更改获取网址，但找不到答案。例如，我想通过单击按钮来更改我的let page和刷新以重新呈现所有新闻。getServerSideProps

我可以这样做还是需要其他替代方法？

import Head from "next/head";
import { NewsArticle, NewsResponse } from "@/modules/NewsArticles";
import { GetServerSideProps } from "next";
import NewsArticleGrid from "@/components/NewsArticleGrid";
import { Button } from "react-bootstrap";
import { useRouter } from "next/router";

interface BreakingNewsPageProps {
  newsArticles: NewsArticle[];
}

let page =
  "https://newsapi.org/v2/everything?q=apple&from=2023-05-03&to=2023-05-03&sortBy=popularity&apiKey=";

export const getServerSideProps: GetServerSideProps<BreakingNewsPageProps> = async () => {
  const response = await fetch(page + process.env.NEWS_API_KEY);
  const newsResponse: NewsResponse = await response.json();
  return {
    props: { newsArticles: newsResponse.articles },
  };
};

export default function BreakingNewsPage({ newsArticles }: BreakingNewsPageProps) {
  const router = useRouter();

  return (
    <>
      <Head>
        <title>Breaking news </title>
      </Head>
      <main>
        <h1>Breaking News</h1>
        <Button
          onClick={() => {
            page =
              "https://newsapi.org/v2/everything?q=tesla&from=2023-04-03&sortBy=publishedAt&apiKey=";
            console.log(page);
            router.push(router.asPath);
          }}
        >
          Change url
        </Button>
        <NewsArticleGrid articles={newsArticles} />
      </main>
    </>
  );
}

Run Code Online (Sandbox Code Playgroud)

Answer 1

You*_*mar 2

page您使用的该变量getServerSideProps仅存在于服务器上。它将无法在运行按钮单击处理程序的浏览器上访问。

您可以使用发送到的查询字符串进行刷新getServerSideProps。下面是一个类似的示例，该示例在点击时获取新帖子：

// pages/index.js

import { useRouter } from "next/router";

export default function Home({ post }) {
  const router = useRouter();
  return (
    <>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
      <button
        onClick={() => {
          router.push({
            href: router.pathname,
            query: { page: Math.round(Math.random() * 10) },
          });
        }}
      >
        Fetch another random post
      </button>
    </>
  );
}

const defaultPage = 1;

export const getServerSideProps = async (context) => {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts/" + (context.query.page || defaultPage));
  const data = await res.json();
  return {
    props: { post: data },
  };
};

Run Code Online (Sandbox Code Playgroud)

我使用jsonplaceholderAPI 让任何人在复制粘贴后都可以轻松使用它。

归档时间：	2 年，8 月前
查看次数：	142 次
最近记录：	2 年，8 月前