Reactjs 使用react钩子和无限滚动获取调用堆栈？

我已经尝试过useMemo和useEffect，但我似乎无法找出我的代码不起作用的原因：

const App: React.FC = () => {
  const dispatch = useDispatch();
  const [page, setPage] = useState(1);

  const { userIds, users, totalUsers } = useSelector(
    ({ users }: RootState) => users
  );
  const renderUsers = useMemo(() => {
    return userIds.map(userId => (
      <div key={users[userId].first_name}>{users[userId].first_name}</div>
    ));
  }, [userIds, users]);
  const hasMore = useMemo(() => {
    return userIds.map(userId => userId).length < totalUsers;
  }, [userIds, totalUsers]);
  const fetchUsers = useCallback(
    async (page: number) => {
      dispatch({
        type: FETCH_USERS_REQUEST,
        payload: { page }
      });
      try {
        const { data, ...result } = await api.fetchUsers(page);
        const user = new schema.Entity('users');
        const {
          entities,
          result: { users: userIds }
        } = normalize({ users: data }, { users: [user] });
        dispatch({
          type: FETCH_USERS_SUCCESS,
          payload: {
            ...result,
            users: entities.users,
            userIds
          }
        });
      } catch (error) {
        dispatch({ type: FETCH_USERS_FAILURE, payload: { error } });
      }
    },
    [dispatch]
  );
  useEffect(() => {
    fetchUsers(1);
  }, [fetchUsers]);
  let scrollParentRef: HTMLDivElement | null = null;
  return (
    <div className="vh-100 vw-100">
      <Header />
      <div
        className="container overflow-auto"
        ref={div => {
          scrollParentRef = div;
        }}
      >
        <InfiniteScroll
          pageStart={0}
          loadMore={async page => await fetchUsers(page)}
          hasMore={hasMore}
          loader={
            <div className="loader" key={0}>
              Loading ...
            </div>
          }
          useWindow={false}
          getScrollParent={() => scrollParentRef}
        >
          {renderUsers}
        </InfiniteScroll>
      </div>
    </div>
  );
};

const-App:React.FC=（）=>{
const dispatch=usedpatch（）；
const[page，setPage]=useState（1）；
const{userIds，users，totalUsers}=useSelector(
（{users}:RootState）=>users
);
const renderUsers=useMoom（（）=>{
返回userId.map（userId=>(
{用户[userId]。名字}
));
}，[userid，users]）；
const hasMore=useMoom（（）=>{
返回userIds.map（userId=>userId）.length{
派遣({
类型：获取用户请求，
有效负载：{page}
});
试一试{
const{data，…result}=wait api.fetchUsers（第页）；
const user=newschema.Entity（'users'）；
常数{
实体，
结果：{users:userIds}
}=规范化（{users:data}，{users:[user]}）；
派遣({
类型：获取用户成功，
有效载荷：{
…结果，
用户：entities.users，
用户标识
}
});
}捕获（错误）{
分派（{type:FETCH\u USERS\u FAILURE，payload:{error}}）；
}
},
[快讯]
);
useffect（（）=>{
访问用户（1）；
}，[fetchUsers]）；
让scrollParentRef:HtmlLevel | null=null；
返回(
{
scrollParentRef=div；
}}
>
等待获取用户（第页）}
hasMore={hasMore}
装载机={
加载。。。
}
useWindow={false}
getScrollParent={（）=>scrollParentRef}
>
{renderUsers}
);
};

---

我使用的是无限滚动，我得到的错误是调用堆栈，请帮助我修复此问题？

您修复了此问题吗？在通过的数组上使用if