[英]React re-render conditional on state change without changing the conditional
[英]what i can do for changing state without re-render
import { useEffect, useState } from "react";
import { useSelector, useDispatch } from "react-redux";
import { fetchMovies } from "../../feautures/movies/moviesSlice";
import { BiLeftArrow, BiRightArrow } from "react-icons/bi";
import Card from "../Card/Card";
import Slider from "../UI/Slider/Slider";
import Navigation from "../Navigations/Navigation";
import "./MoviesList.scss";
import request from "../../requests";
const MoviesList = () => {
const dispatch = useDispatch();
// Current Page
const [currentPage, setCurrentPage] = useState(1);
// Handle movies states
const moviesStatus = useSelector((state) => state.movies.status);
const moviesState = useSelector((state) => state.movies.movies);
const moviesError = useSelector((state) => state.movies.error);
const moviesHeading = useSelector((state) => state.movies.moviesHeading); // It's for pagination
// Handle header input
const inputValue = useSelector((state) => state.movies.inputValue);
// Handle movies heading
const moviesMoviesHeading = useSelector(
(state) => state.movies.moviesHeading
);
// Movies according input values
const filteredMovie = moviesState.filter((movie) =>
movie.original_title.toLowerCase().includes(inputValue)
);
// Handle Page Number
const handlePageNumber = (rotation) => {
if (rotation === "goPrev" && currentPage >= 2) {
setCurrentPage((prev) => prev - 1);
console.log("current page: ", currentPage);
} else if (rotation === "goNext" && currentPage < 10) {
setCurrentPage((prev) => prev + 1);
console.log("current page: ", currentPage);
}
};
// Handle Pagination
const prevNextPage = () => {
if (moviesHeading === "POPULAR") {
console.log("current page", currentPage)
dispatch(fetchMovies(request.fetchPopular(currentPage)));
} else if (moviesHeading === "NOW PLAYING") {
console.log("current page", currentPage)
dispatch(fetchMovies(request.fetchPopular(currentPage)));
} else if (moviesHeading === "UP COMING") {
console.log("current page", currentPage)
dispatch(fetchMovies(request.fetchUpComing(currentPage)));
}
};
useEffect(() => {
if (moviesStatus === "idle") {
dispatch(fetchMovies(request.fetchPopular()));
}
}, [dispatch, moviesStatus]);
let content;
if (moviesStatus === "loading") {
<div>selamlar</div>;
} else if (moviesStatus === "succeeced") {
content = (
<div className="movies__container">
<BiLeftArrow
className="movies__arrow movies__arrow--left"
onClick={() => {
handlePageNumber("goPrev")
prevNextPage()
}}
/>
{filteredMovie.map((movie) => {
return <Card movie={movie} key={movie.id} />;
})}
<BiRightArrow
className="movies__arrow movies__arrow--right"
onClick={() => {
handlePageNumber("goNext")
prevNextPage()
}}
/>
</div>
);
} else if (moviesStatus === "failed") {
content = <div>{moviesError}</div>;
}
return (
<div className="movies">
<Slider />
<div className="movies__heading">{moviesMoviesHeading}</div>
<Navigation />
{content}
</div>
);
};
export default MoviesList;
大家好,今天玩得很开心。我尝试使用 react-redux 制作电影网站。但我卡在某个地方。当我单击向右箭头按钮handlePageNumber
函数增加 currentPage 然后我将此值传递给dispatch(fetchMovies(request.fetchPopular(currentPage)))
转到下一页。但是当我单击向右箭头按钮时, currentPage
状态仍然有 1 个值。如果再单击一次currentPage
有 2 个值。为什么我第一次单击它时它没有 2 的值? 我猜重新渲染后值会发生变化,如果是这样我该怎么办? 最后,如果我的代码中有一些不好的地方,如果您能告诉我我如何才能干净地编写代码,我将不胜感激。
问题是 React 状态更新是异步处理的,因此在下一行调用prevNextPage()
时, handlePageNumber("goPrev")
或handlePageNumber("goNext")
排队的状态更新尚未处理,因此currentPage
仍然是当前渲染周期的值。
请参阅此 SO 答案( useState set 方法不会立即反映更改)以获取解释。
您可以拨打prevNextPage()
从函数useEffect
上依赖currentPage
。 由于prevNextPage
不会在其他地方调用,因此您可以在useEffect
回调中定义它并调用它,或者只是将旧逻辑移到useEffect
回调的主体中。 您还需要包含moviesHeading
作为依赖项。
useEffect(() => {
if (moviesHeading === "POPULAR") {
console.log("current page", currentPage)
dispatch(fetchMovies(request.fetchPopular(currentPage)));
} else if (moviesHeading === "NOW PLAYING") {
console.log("current page", currentPage)
dispatch(fetchMovies(request.fetchPopular(currentPage)));
} else if (moviesHeading === "UP COMING") {
console.log("current page", currentPage)
dispatch(fetchMovies(request.fetchUpComing(currentPage)));
}
}, [currentPage, dispatch, moviesHeading]);
并从点击处理程序中删除调用。
content = (
<div className="movies__container">
<BiLeftArrow
className="movies__arrow movies__arrow--left"
onClick={() => {
handlePageNumber("goPrev");
}}
/>
{filteredMovie.map((movie) => {
return <Card movie={movie} key={movie.id} />;
})}
<BiRightArrow
className="movies__arrow movies__arrow--right"
onClick={() => {
handlePageNumber("goNext");
}}
/>
</div>
我可能还建议简化您的handlePageNumber
逻辑以使用数字值而不是字符串,并将该值限制在您的页面范围内
// Handle Page Number
const handlePageNumber = (nextPage) => {
setCurrentPage(page => Math.max(1, Math.min(page + nextPage, 10));
};
将 pass 1
或-1
添加到回调以返回页面或前进到下一页。
content = (
<div className="movies__container">
<BiLeftArrow
className="movies__arrow movies__arrow--left"
onClick={() => {
handlePageNumber(-1);
}}
/>
{filteredMovie.map((movie) => {
return <Card movie={movie} key={movie.id} />;
})}
<BiRightArrow
className="movies__arrow movies__arrow--right"
onClick={() => {
handlePageNumber(1);
}}
/>
</div>
似乎 react 的 setState 方法是异步工作的,但您认为它是同步方法。 如果我是你,我会将 pagenumber 存储在 redux 状态。 我编写操作来处理单击上一个/下一个按钮并发送下一页状态(如果 currentPage = 8,则我为 nextButton 发送 9,为 prevButton 发送 7),触发此操作后,我使用 redux-thunk 或 redux- 处理异步操作saga,每当我从中间件得到响应时,我都会为此异步操作调用成功或失败操作,它将处理下一个 redux 状态
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.