Почему хук useState реагирует на слишком много повторных рендеров. React ограничивает количество рендеров, чтобы предотвратить бесконечный цикл

Question

У меня следующий скрипт

const [customers, setCustomer] = useState([]);

  if(users.results){
    users.results.filter(user => {
      user.roles.filter(role => {
        if(role.role.name === 'ADMIN'){
          admins.push(user);
        }
      });
    });
    let x = []
    users.results.filter(user => {
      user.roles.filter(role => {
        if (role.role.name === 'CUSTOMER') {
          x.push(user);
        }
      });
    });
    setCustomer(x);
  }

, попытка вызвать setCustomer вызывает Слишком много повторных рендеров. React ограничивает количество рендеров, чтобы предотвратить бесконечность l oop. . Я не могу найти причину почему. Как установить для клиентов значение x, не вызывая вышеуказанную ошибку?

ОБНОВЛЕННЫЙ КОД

const Administration = props =>{
  const { fetchUsers, users, loading_users } = props;
  const usersPerPage = 9

  useEffect(() => {
    fetchUsers();
  }, []);

  let admins = [];
  const [customers, setCustomer] = useState([]);

  if(users.results){
    users.results.filter(user => {
      user.roles.filter(role => {
        if(role.role.name === 'ADMIN'){
          admins.push(user);
        }
      });
    });
    let x = []
    users.results.filter(user => {
      user.roles.filter(role => {
        if (role.role.name === 'CUSTOMER') {
          x.push(user);
        }
      });
    });
    setCustomer(x);
  }

Answer 1

Похоже, вы хотите обновить клиента только с setCustomer, когда users обновляет. Поместив это в useEffect с users в качестве опции «звонить только тогда, когда это изменится», можно сделать это за вас. Кроме того, похоже, что admins должен быть состоянием:

const [admins, setAdmins] = useState([]);

useEffect(() => {
  if(users.results){
    let admins = [];
    users.results.filter(user => {
      user.roles.filter(role => {
        if(role.role.name === 'ADMIN'){
          admins.push(user);
        }
      });
    });
    setAdmins(admins);

    let x = []
    users.results.filter(user => {
      user.roles.filter(role => {
        if (role.role.name === 'CUSTOMER') {
          x.push(user);
        }
      });
    });
    setCustomer(x);
  }
}, [users]);

Теперь это будет выполняться только при монтировании и при изменении состояния users.