получить callstack с реагирующими хуками и бесконечной прокруткой? - PullRequest
Новая
       25

получить callstack с реагирующими хуками и бесконечной прокруткой?

0 голосов
/ 29 января 2020

Я уже попробовал 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>
  );
};

Я использую бесконечную прокрутку, и ошибка, которую я получил, является стеком вызовов Пожалуйста, помогите мне исправить это?

...