如何解决useEffect和循环依赖关系

Question

嗨，在一个页面中，我有多个过滤器，根据它们的变化，我正在重新呈现一个列表。我的单子上也有页码。每次currentPage和日期更改时，我都会重新发送一个api调用。

问题是当我更改日期时，currentPage也需要更改为0。

• 日期更改导致在useEffect中重新渲染
• 由于我在useEffect中设置了setCurrentPage(0(，它会导致另一次渲染

这是完整的组件。我不能把它简化为沙盒。

const RunDetail = () => {
const PAGE_SIZE = 20
const {date, team, createdBy} = useContext(ActivityContext);
const [executions, setExecutions] = useState([]);
const [totalElement, setTotalElement] = useState(0);
const [isFirstPage, setIsFirstPage] = useState(true);
const [currentPage, setCurrentPage] = useState(0);
const [totalPages, setTotalPages] = useState(1);
const [isLastPage, setIsLastPage] = useState(true);
useEffect(async () => {
if (date) {
let response = await myService.getRunDetail(
getStartOfTheDayAsMillisecond(date),
getEndOfTheDayAsMillisecond(date),
team || undefined,
createdBy || undefined,
currentPage,
PAGE_SIZE
)
setCurrentPage(currentPage)
setExecutions(response.content)
setTotalPages(response.totalPages)
setTotalElement(response.totalElements)
}
},[date, currentPage]
)
useEffect(() => {
setIsLastPage(currentPage + 1 === totalPages)
setIsFirstPage(currentPage === 0)
}, [currentPage, totalPages])
const goLastPage = () => {
setCurrentPage(totalPages - 1)
}
const goFirstPage = () => {
setCurrentPage(0)
}
const goToPage = (page) => {
setCurrentPage(page)
}

const renderExecutionListHeader = () => {
return (
<div>
{
executions.length > 0 ?
<p>Run details of the day {date} Run Count: {totalElement}</p>
: <p> No executions on {date}</p>
}
</div>
)
}
return (
<div>
{date !== "" ?
<div>
{renderExecutionListHeader()}
<ListGroup>
{executions.map((item,) => {
return (
<ListGroupItem className="justify-content-between" key={item.runId}>
<Row>
<Col>
{item.team}
</Col>
<Col>
{item.createdBy}
</Col>
<Col>
{new Date(item.startDate).toString().slice(0, 24)}
</Col>
<Col>
<Link to={`/report/${item.runId}`}>
<Button
outline
color="primary"
size="sm"
>
Report Detail
</Button>
</Link>
</Col>
</Row>
</ListGroupItem>
)
})}
</ListGroup>
<Pagination currentPage={currentPage}
goFirstPage={goFirstPage}
goLastPage={goLastPage}
goToPage={(page) => goToPage(page)}
hideNextPage={isLastPage}
totalPages={totalPages}>
</Pagination>
</div> :
<Row>
<p>
Select a day on heatmap to see details
</p>
</Row>
}
</div>)
}

Answer 1

useEffect(async () => {
if (date) {
let response = await myService.getRunDetail(
getStartOfTheDayAsMillisecond(date),
getEndOfTheDayAsMillisecond(date),
team || undefined,
createdBy || undefined,
currentPage,
PAGE_SIZE
)
//setCurrentPage(currentPage)
setExecutions(response.content)
setTotalPages(response.totalPages)
setTotalElement(response.totalElements)
}
},[date, currentPage]
)