Question

我正在尝试使用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();

Answer 1

问题在于您正在Class组件内调用FetchUsers，而FetchUsers正在执行React Hook。这是React不允许的。

Answer 2

首先-挂钩在基于类的组件中不起作用。

第二个-所有自定义钩子都应以use开始，在您的情况下为useFetchUsers。通过将use设置为前缀，react会跟踪您的钩子，以正确的顺序调用等等。

对简单的提取请求使用钩子并破坏钩子规则，不确定如何做？

2 个答案: