Как добавить строки запроса в URL, созданный React-Infitinte-Scroller?

Question

У меня возникли некоторые проблемы с реализацией этой библиотеки, response-infinite-scroller . Я думаю, что реализация была хорошей, потому что каждый раз, когда я прокручиваю вниз, он делает запрос, и когда я прокручиваю вверх, запросы останавливаются, поэтому я предполагаю, что все в порядке.

Текущие запросы сделаны к этому function:

export const getPostsByUser = params => async dispatch => {
  dispatch({ type: CLEAR_POST });
  try {
    const res = await axios.get(`/api/v1/posts${params}`);
    dispatch({
      type: GET_POSTSBYUSER,
      payload: res.data
    });
  } catch (err) {
    dispatch({
      type: PROFILE_ERROR,
      payload: { msg: err.response.statusText, status: err.response.status }
    });
  }
};

, и URL-адрес, сгенерированный для каждого запроса, является следующим:

, как вы можете видеть, запрос продолжает добавлять число как I прокрутите вниз.

Проблема, с которой я столкнулся, заключается в том, что мне нужно передать параметры в функцию.

Скажем, для того, чтобы я заработал, запрос должен выглядеть примерно так:

/api/v1/posts?user=${userId}&page=${page}&limit=${limit}

import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import Moment from 'react-moment';
import moment from 'moment';
import {
  getProfileById,
  getPostsByUser,
} from '../../../actions/profile';
// Helpers
import Alert from '../../layout/Alert';
import Spinner from '../../layout/Spinner';
import ProfileTop from './ProfileTop';
import NavMenu from './NavMenu';
// Utils
// Reactstrap
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import Card from 'react-bootstrap/Card';
import Carousel from 'react-bootstrap/Carousel';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
import Button from 'react-bootstrap/Button';
import Media from 'react-bootstrap/Media';
import InfiniteScroll from 'react-infinite-scroller';
const Profile = ({
  getProfileById,
  getPostsByUser,
  profile: { profile, postsbyuser, loading },
  match,
  auth
}) => {
  const userId = match.params.id;
  const [page, setPage] = useState(1);
  const [limit, setLimit] = useState(3);
  const params = `?user=${userId}&page=${page}&limit=${limit}`;
  useEffect(() => {
    getProfileById(userId);
    getPostsByUser(params);
  }, [
    match.params.id
  ]);

  return loading || profile === null ? (
    <Spinner />
  ) : (
    <section className="mt-n3 mb-3">
      <Container>
        {/*
         *
         *  JUMBOTRON
         *
         */}
        <ProfileTop profile={profile} />
        {/*
         *
         *  NAVS
         *
         */}
        <NavMenu profile={profile} />
        <Alert />
        {/*
         *
         *  POSTS
         *
         */}
        <Row>
          <Col xl={8} lg={8} md={12} sm={12} xs={12}>
            {/*
             *
             *  CREATE POST TEXTAREA
             *
             */}
            {/*
             *
             *  POSTS
             *
             */}
            <InfiniteScroll
              pageStart={1}
              loadMore={getPostsByUser}
              hasMore={true || false}
              loader={
                <div className="loader" key={0}>
                  Loading ...
                </div>
              }
            >
              {postsbyuser.data && postsbyuser.data.length > 0 ? (
                <>
                  {postsbyuser.data.map((post,i) => (
                    <article key={i} className={`${post._id} mb-3`}>
                      <Card>
                        <Card.Header>
                          <div className="">
                            <Link to={`/profiles/${post.user._id}`}>
                              <img
                                src={`${post.user.avatar}`}
                                alt={`${post.user.username}`}
                                className="card-profile-image"
                                style={{
                                  width: 'auto',
                                  height: '35px',
                                  objectFit: 'cover',
                                  marginRight: '5px'
                                }}
                              />
                            </Link>
                            {post.user.username}
                            </div>
                          </div>
                        </Card.Header>
                        <Card.Body className="p-0">
                          <Carousel style={{ position: 'sticky' }}>
                            {post.images.slice(0, 5).map((image, index) => (
                              <Carousel.Item key={index}>
                                <img
                                  src={image}
                                  alt=""
                                  className="p-0 d-block w-100"
                                />
                              </Carousel.Item>
                            ))}
                          </Carousel>
                        </Card.Body>
                      </Card>
                    </article>
                  ))}
                </>
              ) : (
                <div className="alert alert-danger">No posts found</div>
              )}
            </InfiniteScroll>
          </Col>
        </Row>
      </Container>
    </section>
  );
};

Profile.propTypes = {
  getProfileById: PropTypes.func.isRequired,
  getPostsByUser: PropTypes.func.isRequired,
  profile: PropTypes.object.isRequired,
  auth: PropTypes.object.isRequired
};

const mapStateToProps = state => ({
  profile: state.profile,
  auth: state.auth
});

export default connect(mapStateToProps, {
  getProfileById,
  getPostsByUser
})(Profile);

Кто-нибудь знает способ сделать это?