Javascript 在一个简单的获取请求中使用钩子并打破钩子的规则，不确定如何使用？

我正在尝试从AWS数据库创建一个带有钩子的简单获取。目前它出错了，我能看到的唯一原因是它打破了钩子的规则，但我不知道如何。它位于这个功能组件的顶层，并且不在事件处理程序中调用

此调用的结果（用户数据数组）需要作为函数导出并在另一个文件中调用

如果有人能发现我错过的东西，并能强调我是如何打破钩子的规则，我将不胜感激

谢谢

const FetchUsers = () => {
  const [hasError, setErrors] = useState(false);
  const [Users, setUsers] = useState({});

  async function fetchData() {
    const res = await fetch(
      "USERSDATABASE"
    );
    res
      .json()
      .then(res => setUsers(res))
      .catch(err => setErrors(err));
  }

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

  return Users;
};
export { FetchUsers };

在这里消费

class UsersManager {
  constructor() {
    this.mapUserCountries = {};
  }
  init() {
    const mappedUsers = FetchUsers();
    mappedUsers.forEach(user => {
      const c = user.country;

      if (!this.mapUserCountries[c])
        this.mapUserCountries[c] = { nbUsers: 0, users: [] };
      this.mapUserCountries[c].nbUsers++;
      this.mapUserCountries[c].users.push(user);
    });
  }

  getUsersPerCountry(country) {
    return this.mapUserCountries[country];
  }
}

export default new UsersManager();

---

问题是您正在类组件内调用FetchUsers，而FetchUsers正在执行React钩子。React不允许这样做

First-hook在基于类的组件中不起作用

---

第二，所有自定义挂钩都应该从use开始，在您的例子中是useFetchUsers。通过设置use as prefix，react将跟踪DEP的钩子并以正确的顺序调用等等。

必须将单词“use”作为前缀不是真的，您应该但不是必须的，react将跟踪它，无论它是否以“use”开头。对于应用lint规则，这是非常推荐的，你必须感谢我不知道它不能在类组件中调用，只能使用。我正在重构我的类组件，因为我认为在这种情况下钩子对我来说是不必要的。