I know this error is being triggered because of the TableBody Since once I comment the lines within it, the useEffect gets fired only once.

I've read that if you use the empty array as second parameter for this function, it should be called only when component is mounted. But regardless of using it, useEffect is getting called recursively every time a Row in TableBody is appended.

I just want to fetch the users list once (when the component is rendered the first time). It used to work when it was a class component, but Im changing all my code to use only functional componentes, so Im unable to use ComponentDidMount() and that's what I'm trying to replace.

This is my Components Code:

import React, { Component, useState, useEffect } from "react";
import axios from "axios";
import { Link } from "react-router-dom";
import {
  TableContainer,
  Table,
  TableHead,
  TableBody,
  TableRow,
  TableCell,
} from "@material-ui/core";
import Backdrop from "@material-ui/core/Backdrop";
import CircularProgress from "@material-ui/core/CircularProgress";
import DeleteIcon from "@material-ui/icons/Delete";
import Button from "@material-ui/core/Button";
import { makeStyles } from "@material-ui/core/styles";
import { formatDate } from "../../utilities";


const useStyles = makeStyles((theme) => ({
  tablaMaterial: {
    minWidth: 800,
  },
  backdrop: {
    zIndex: 2,
    color: "#08eeff",
  }
}));

const UserList = () => {
  const classes = useStyles();
  const [isLoading, setIsLoading] = useState(false);
  const [users, setUsers] = useState([]);

  
  const selectUser = (userId) => {
    console.log('who is calling me');
    let baseUrl = 'http://localhost:1337/deleteUser'
    axios.post(baseUrl, {
      User_Id : userId})
      .then((response) => {
        console.log(response);
      })
      getAllUsers();
  }

  const getAllUsers = () => {
    console.log('did you call me');
    let baseUrl = "http://localhost:1337/getUsers";
    axios
    .get(baseUrl)
    .then((response) => {
        console.log(response.data);
        setUsers(response.data);
      })
      .catch((error) => {
        console.log(error);
      });
    }

    useEffect(() => {
        getAllUsers();
      }
    , []);
    
    return (
      <>
      <div >
        <h3 >Lista de Empleados </h3>
        <TableContainer>
          <Table>
            <TableHead>
              <TableRow hover>
                <TableCell align="center">NAME</TableCell>
                <TableCell align="center">LAST NAME</TableCell>
                <TableCell align="center">ID NUMBER</TableCell>
                <TableCell align="center">DATE OF BIRTH</TableCell>
                <TableCell align="center">SALARY</TableCell>
                <TableCell align="center">WORKED HOURS</TableCell>
                <TableCell align="center">EMAIL</TableCell>
                <TableCell align="center">PHONE</TableCell>
                <TableCell align="center">ACTIONS</TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {users.map((user, index) => {
                return (
                  <TableRow key={index}>
                    <TableCell align="left">{user.User_Name}</TableCell>
                    <TableCell align="center">{user.User_Last_Name}</TableCell>
                    <TableCell align="center">{user.Document_Id}</TableCell>
                    <TableCell align="center">{formatDate(user.Birth_Date)}</TableCell>
                    <TableCell align="center">{user.Salary}</TableCell>
                    <TableCell align="center">{user.Weekly_Hours}</TableCell>
                    <TableCell align="center">{user.User_Email}</TableCell>
                    <TableCell align="center">{user.Phone_Number}</TableCell>
                    <TableCell align="center">
                      <Button
                        align="center"
                        variant="contained"
                        color="secondary"
                        startIcon={<DeleteIcon align="center" />}
                        onClick={selectUser(user.User_Id)}
                      >
                        Delete
                      </Button>
                    </TableCell>
                  </TableRow>
                );
              })}
            </TableBody>
          </Table>
        </TableContainer>
      </div>
      </>
    );
  }

export default UserList;

Note: There's also a very particular situation, even though Im never invoking SelectUser Method, its getting called in this recursive loop forever.

I would be more than glad to any suggestions, Im kind of stucked here.

CodePudding user response：

You are invoking selectUsers() method:

onClick={selectUser(user.User_Id)}

Change this to:

onClick={() => selectUser(user.User_Id)}