你能在服务器端渲染中使用useState(和其他react钩子?)吗?每次我试图运行下面的代码时,我都会得到错误
TypeError:无法读取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,
},
};
}
}
字符串
3条答案
按热度按时间dxpyg8gm1#
我认为根本的问题是你使用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的
ttp71kqs2#
useState
应该在组件内部,它是一个React钩子。服务器端函数独立于React组件。我认为问题是组件的名称应该大写:
字符串
yqlxgs2m3#
遇到了类似的问题,但解决方案最终不同,所以张贴在这里的情况下,有人在未来的利益。
基本上,
TypeError: Cannot read property 'useState' of null
的原因之一可能是React加载了多次,因此无法正确跟踪钩子是否在组件内。here和here有很多细节,根本原因可能非常不同,但可能与代码如何捆绑有关。在我的具体情况下,我有一个单独的文件夹用于SSR代码和共享代码,这两个都在
package.json
中安装了单独的react
和react-dom
。从SSR特定文件夹中删除react
和react-dom
,只重用共享文件夹解决了这个问题