如何解决useEffect和循环依赖

Question

嗨，在一个页面中，我有多个过滤器，根据它们的变化，我正在重新呈现一个列表。我也有分页列表。每次 currentPage 和 date 改变时，我都会重新发送一个 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]
  )