Реагировать на нумерацию страниц - PullRequest
Новая
       16

Реагировать на нумерацию страниц

0 голосов
/ 07 ноября 2018

Я должен внедрить систему чата в ответ, я делаю это в первый раз, и я застрял. Мне нужно передать страницу № в бэкэнд API, чтобы каждый раз получать новые данные. И я должен передавать страницу № в API при прокрутке. я использую [1]: https://www.npmjs.com/package/react-infinite-scroller

я получаю общее количество данных и 9 массивов данных на страницу из api.scroll, до которого доступно общее количество, и когда пользователь прокручивается до верха, должен загрузить больше. Я перепробовал много модулей, но не смог реализовать разбиение на страницы на scroll.using Модуль response-infinite-scroll Я получаю страницу №, но она не работает так, как я хочу. Пожалуйста, предложите мне правильный способ сделать это

вот мой код компонента 

        const mapStateToProps = state => ({
          users: state.sidebarUser.users,
          total:state.sidebarUser.total,
          routing: state.routing,
          converSationId: state.getConversationId.data
        });
        const mapDispatchToProps = dispatch => ({
          loadUserList: (page={}) => (dispatch(getSideBarUser(page))),
          getConversationId: (userId) =>
            dispatch(getConversationId(userId)),
          loadUserContent: id => dispatch(UserChatList(id))
        });
        class SidebarContainer extends Component {
          constructor(props) {
            super(props);
            this.state={
              isLoading:false,
              sidebar:[],
              page:0,
              hasMore: true,
            }
            this.getPosts=this.getPosts.bind(this);
          }



          componentDidMount() {
            const {
              location: { search }
            } = this.props.routing;
            let userId = new URLSearchParams(search).get("id");
            this.props.loadUserList({page:1});
            this.setState({page:this.state.page+1});
            this.props.getConversationId(userId);
          }

          getPosts(page) {
            console.log("pgae---->",page)
            console.log("this.props--->",this.props.users)
            this.props.loadUserList({page:page});
          }

          render() {
            const { users } = this.props;
            const {hasMore,sidebar} =this.state;
              return (
              <div className="chatting-user-list-section" ref={(ref) => this.scrollParentRef = ref} >
                <InfiniteScroll
                    initialLoad={false}
                    pageStart={0}
                    loadMore={this.getPosts.bind(this)}
                    hasMore={hasMore}
                    getScrollParent={() => this.scrollParentRef}
                    threshold={520}
                    loader={<div className="loader">Loading ...</div>}>
                    <SidebarComponent users={users} listClicked={this.listClicked} />
                  </InfiniteScroll>
              </div>)
          }
        }

        export const Sidebar = connect(
          mapStateToProps,
          mapDispatchToProps
        )(SidebarContainer)

а вот мой редуктор 

 import { SIDEBAR_USERS_SUCCESS, SIDEBAR_USERS_FAILURE } from './ActionTypes';
    const initialState = {
        users: [],
        total: 0
    }
    export const sidebarUser = (state = initialState, { type, payload }) => {
        switch (type) {
            case SIDEBAR_USERS_SUCCESS: {
                return { ...state, ...payload };
            }
            case SIDEBAR_USERS_FAILURE: {
                return { ...state, error: payload }
            }
            default:
                return state;
        }
    };
...