我可以将 UseState 与服务器端渲染一起使用吗？

Question

您可以将 useState （和其他反应挂钩吗？）与服务器端渲染一起使用吗？每次我尝试运行下面的代码时都会收到错误

类型错误：无法读取 null 的属性“useState”。

但是，当我在最底部注释掉 getServerSideProps 函数时，按预期运行代码没有问题。所以我的问题是 useState 可以与 Nextjs 中的服务器端渲染一起使用吗？如果答案是肯定的，那么下面的代码哪里出错了？

 import React from "react";
    import { useRouter } from "next/router";
    import useSelectedGenreInfoExtractor from "../../hooks/useSelectedGenreInfoExtractor";
    import { useState } from "react";
    import { useEffect } from "react";
    import Navbar from "../../components/Navbar";
    import useFetchTrendingCatagory from "../../hooks/useFetchTrendingCatagory";
    import useFetchTopRatedCatagory from "../../hooks/useFetchTopRatedCatagory";
    import useFetchMovieGenreResults from "../../hooks/useFetchMovieGenreResults";
    import Moviegenreresults from "../../components/Moviegenreresults";
    
export default function genre(props) {
      const [myresultsfromhook, setMyresultsfromhook] = useState();
      const [myreturnedmovies, setMyreturnedmovies] = useState();
    
      const router = useRouter();
      const { genre } = router.query;
    
      if (genre == "Trending") {
        let mymovies = useFetchTrendingCatagory();
        console.log("This is a log of my props", props);
    
        return (
          <div>
            {/* <Navbar /> */}
            <div>{genre}</div>
            <Moviegenreresults movies={mymovies} />
          </div>
        );
      } else if (genre == "Top Rated") {
        let mymovies = useFetchTopRatedCatagory();
    
        return (
          <div>
            {/* <Navbar /> */}
            <div>{genre}</div>
            <Moviegenreresults movies={mymovies} />
          </div>
        );
      } else {
        let mymovies = useFetchMovieGenreResults(genre);
    
        return (
          <div>
            {/* <Navbar /> */}
            <div>{genre}</div>
            <Moviegenreresults movies={mymovies} />
          </div>
        );
      }
    }
    
    export async function getServerSideProps(context) {
      if (context.params.genre == "Trending") {
        let mymovies = useFetchTrendingCatagory();
        return {
          props: {
            results: mymovies.results,
          },
        };
      } else if (context.params.genr == "Top Rated") {
        let mymovies = useFetchTopRatedCatagory();
        return {
          props: {
            results: mymovies.results,
          },
        };
      } else {
        let mymovies = useFetchMovieGenreResults(genre);
        return {
          props: {
            results: mymovies.results,
          },
        };
      }
    }

Answer 1

我认为从根本上来说问题在于您使用 getServerSideProps 的方式。

即使答案是你不能在 getServerSideProps 中使用 useState 因为这个函数在服务器中运行，但了解 getServerSideProps 的作用和时间很重要，我认为你可以在下一个文档中找到非常清晰的解释。

https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props

在 getServerSideProps 内部使用 axios 或 fetch api 来获取数据并将其传递给 props。

我不是 100% 确定，但我认为在你的情况下，你也可以使用 Promise.all() 从这三个 api 调用中获取数据。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all