对一个简单的获取请求使用钩子，并违反钩子的规则，不确定如何使用

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

First-钩子在基于类的组件中不起作用。

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