Reactjs 反应'；错误：超过最大更新深度。'；具有功能组件和挂钩

我得到以下错误：

Error: Maximum update depth exceeded.

使用此组件：

const UsersPage: React.FunctionComponent<UsersPageProps> = ({
  location,
  history,
  match,
}): JSX.Element => {
  const dispatch = useDispatch();
  const { search } = location;

  const query = parseInt(location.search, 10);
  const [currentPage, setCurrentPage] = useState<number>(
    isNaN(query) || query < 0 ? 0 : query
  );

  const users = useSelector((state: any) => state.manageUsers.users.results);
  const isLoading = useSelector((state: any) => state.manageUsers.usersLoaded);
  const totalPages = useSelector(
    (state: any) => state.manageUsers.users.totalPages
  );
  const handlePaginationChange = (
    event: React.ChangeEvent<any>,
    pageNumber: number
  ): void => {
    history.push(`${match.path}?page=${pageNumber ?? 0}`);
    setCurrentPage(pageNumber ?? 0);
  };

  const handleAddUserOnClick = () =>
    dispatch(manageUsersSetNewUserAndNavigate());
  const handleEditOnClick = (id) =>
    dispatch(manageUsersSetActiveEditUserAndNavigate(id));

  useEffect(() => {
    dispatch(manageUsersLoadUsers(currentPage));
  }, [currentPage]);

  return (
    <section className="users page">
      {!isLoading && <SectionLoaderWithMessage message={"Loading users..."} />}
      {isLoading && (
        <React.Fragment>
          <Toolbar disableGutters={true}>
            <Title flex={1}>Manage Users</Title>

            <Button
              variant="contained"
              color="secondary"
              onClick={handleAddUserOnClick}
              startIcon={<AddCircle />}
            >
              Add User
            </Button>
          </Toolbar>
          <TableContainer component={Paper}>
            <Table aria-label="table">
              <TableHead>
                <TableRow style={{ backgroundColor: "white" }}>
                  <TableCell style={{ fontWeight: "bold", minWidth: 150 }}>
                    Email
                  </TableCell>
                  <TableCell style={{ fontWeight: "bold", minWidth: 150 }}>
                    Name
                  </TableCell>
                  <TableCell style={{ fontWeight: "bold", minWidth: 150 }}>
                    Surname
                  </TableCell>
                  <TableCell style={{ fontWeight: "bold", minWidth: 150 }}>
                    Firm
                  </TableCell>
                  <TableCell style={{ fontWeight: "bold", minWidth: 150 }}>
                    Type
                  </TableCell>
                  <TableCell style={{ fontWeight: "bold", minWidth: 150 }}>
                    Enabled
                  </TableCell>
                </TableRow>
              </TableHead>
              <TableBody>
                {users.map((user, index) => (
                  <TableRow
                    key={`${user.id}-${index}`}
                    onClick={() => handleEditOnClick(user.id)}
                    hover
                  >
                    <TableCell>{user.email}</TableCell>
                    <TableCell>{user.name}</TableCell>
                    <TableCell>{user.surname}</TableCell>
                    <TableCell>{user.firmName}</TableCell>
                    <TableCell>{user.type}</TableCell>
                    <TableCell>{`${user.enabled}`}</TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
            <ThemedTablePagination
              totalPages={totalPages}
              pageNumber={currentPage}
              onChange={handlePaginationChange}
            />
          </TableContainer>
        </React.Fragment>
      )}
    </section>
  );
};

export default UsersPage;

const UsersPage:React.FunctionComponent=({
地方
历史
火柴
})：JSX.Element=>{
const dispatch=usedpatch（）；
const{search}=位置；
const query=parseInt（location.search，10）；
常量[currentPage，setCurrentPage]=useState(
isNaN（查询）| |查询<0？0:查询
);
constusers=useSelector（（state:any）=>state.manageUsers.users.results）；
const isLoading=useSelector（（状态：any）=>state.manageUsers.usersLoaded）；
const totalPages=useSelector(
（state:any）=>state.manageUsers.users.totalPages
);
常量handlePaginationChange=(
事件：React.ChangeEvent，
页码：第
)：void=>{
history.push（`${match.path}？page=${pageNumber±0}`）；
setCurrentPage（页码？？0）；
};
const handleAddUserOnClick=（）=>
调度（manageUsersSetNewUserAndNavigate（））；
const handleEditOnClick=（id）=>
调度（manageUsersSetActiveEditUserAndNavigate（id））；
useffect（（）=>{
调度（manageUsersLoadUsers（currentPage））；
}，[currentPage]）；
返回(
{！正在加载&&}
{isLoading&&(
管理用户
添加用户
电子邮件
名称
姓
商行
类型
启用
{users.map（（用户，索引）=>(
handleEditOnClick（user.id）}
悬停
>
{user.email}
{user.name}
{用户姓氏}
{user.firmName}
{user.type}
{`${user.enabled}`}
))}
)}
);
};
导出默认UsersPage；

---

我在渲染中看不到任何地方正在更新状态以导致无限循环。

函数

handlePaginationChange

应该在内部使用效果

---

当前，每次调用

setCurrentPage

时，它都会重新呈现组件，该组件又会再次调用handlePaginationChange函数，因此再次调用setCurrentPage，并且循环不断

你有没有试着把它减少到一个小的级别？我不确定，但我认为useEffect中的调度会重新渲染组件。因此，当它重新渲染时，useEffect会被再次调用，直到无限。您可以尝试在当前useEffect（）中放置一个

控制台。count

？看看这是否被称为无限次