為什么 useState react hook 會導致過多的重新渲染。 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 限制了渲染的數量以防止無限循環。 . 我似乎找不到原因。 如何在不導致上述錯誤的情況下將客戶設置為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

聽起來您只想在users更新時使用setCustomer更新客戶。 將其與users一起放在useEffect中作為“僅在此更改時調用”選項可以為您做到這一點。 看起來admins應該是 state：

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 state 更改時。