redux useEffect 和 useDispatch 不起作用(最大调用堆栈)?

Question

我是 redux 钩子和反应钩子的新手，这是我的代码不会停止渲染？

const App: React.FC = () => {
const dispatch = useDispatch();
const [page, setPage] = useState(1);
const fetchUsers = async (page: number) => {
dispatch({
type: FETCH_USERS_REQUEST,
payload: { page }
});
try {
const { data, ...result } = await api.fetchUsers(page);
const user = new schema.Entity('data');
const users = normalize(
{ users: data },
{
users: [user]
}
);
dispatch({
type: FETCH_USERS_SUCCESS,
payload: {
...result,
users
}
});
} catch (error) {
dispatch({ type: FETCH_USERS_FAILURE, payload: { error } });
}
};
useEffect(() => {
fetchUsers(1);
}, [fetchUsers]);
const users = useSelector((state: RootState) => state.users);
console.log('asd', users);
return (
<div className="vh-100 vw-100">
<header>Users</header>asdasd
</div>
);
};

fetchUsers 是一种异步方法，我计划在 loadMore 和分页上多次使用，但是，这不起作用，我该如何让它工作？

Answer 1

您的 fetchUsers 在每次重新渲染时都会发生变化，该重新渲染将 useEffect 与要触发的 fetch 括起来。

试试这个：

useEffect(() => {
fetchUsers(pageNumber);
}, [pageNumber]);