这是我第一次来
我正在一个网站上使用TMDB API，React，Redux和React Router Dom显示有关电影的信息和电视节目。我想按类型和页面对电影进行排序。因此，在我的电影页面中，我有一个流派列表，每个流派都有一个ID，使我的useEffect（）钩子可以在每次单击新流派或更改页面时重新呈现。
电影页面的链接看起来像以下movie /：genreID /：pageNumber。因此，基本上，这个想法是每次单击一种类型或更改页面时，URL更新，然后我使用useParams（）从中获取新的genreID和pageNumber，然后将它们发送给派遣对象并重新渲染组件。
我的代码看起来像这样
const Movies = ({ isFrench, isOpen }) => {
const dispatch = useDispatch();
const history = useHistory();
const { genreID, pageNumber } = useParams();
const language = isFrench ? "fr" : "";
const [genres, setGenres] = useState(genreID);
const [page, setPage] = useState(pageNumber);
useEffect(() => {
dispatch(fetchMovies(language, page, genres));
history.push(`movies/${genres}/${page}`);
}, [dispatch, language, page, genres, history]);
const { popularMovies, numOfPages, isLoading } = useSelector(
(state) => state.movies
);
//Change Category
const changeCategoryHandler = (id) => {
setPage(1);
setGenres(id);
getCategoryName(id);
};
//Print categories
const frenchCategories = categoriesMoviesFR.map((category) => (
<li onClick={() => changeCategoryHandler(category.id)} id={category.id}>
{category.name}
</li>
));
...
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>问题是，例如，如果我在第3页上，并且按浏览器的“后退”按钮返回到第2页，则可以看到该链接在浏览器中发生了变化，但组件未更新。流派也是如此。如果我退出Action for Adventure并单击“后退”按钮以返回到Action，则可以看到链接发生了变化，但组件没有刷新。
有没有人遇到过这种问题？感谢您提供的任何帮助
问题在这里：
const { genreID, pageNumber } = useParams();
const [genres, setGenres] = useState(genreID);
const [page, setPage] = useState(pageNumber);
您正在使用动态props值初始化状态，但是state的默认值不会改变，因为useState仅被调用一次。您可以尝试打印出genreID和pageNumber，并genres与page找出。
解
您可以直接{ genreID, pageNumber }在整个Movies组件中使用。如果您确实需要将它们存储在状态中，请使用useEffect以下命令：
useEffect(()=>{
setGenres(genreID)
setPage(pageNumber)
},[genreID, pageNumber])
我为您做了一个非常简单的演示，以使您对这种类型的问题有清晰的认识。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句