javascript - 为什么 useState React hook 会导致 Too much re-renders。 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]);

现在，这只会在安装时以及用户状态更改时运行。