1

我必须在第一次做的时候实现聊天系统并且我被卡住了。我必须每次都将页面编号传递给后端 api 以获取新数据。我必须在滚动时将页面编号传递给 api。我正在使用 [1]：https ://www.npmjs.com/package/react-infinite-scroller

我从 api.scroll 获取总数据计数和每页 9 个数据数组，直到总计数可用，当用户滚动到顶部时应该加载更多。我尝试了很多模块，但未能在滚动上实现分页。使用 react-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;
        }
    };
4

0 回答 0