Problem with Infinite Scrolling in React

Asked

Viewed 55 times

1

I’m trying to do an "Infinite Scrolling (I used this Realscout plugin)", but even without reaching the bottom of the page, it always makes new requests, without stopping. Look at the image: Exemplo

Follows my code:

jsx phrases.

import InfiniteScroll from 'redux-infinite-scroll'
import { loadMore } from './frasesActions'


class Frases extends Component {

    constructor(props) {
        super(props)
    }

    componentWillMount() {
        this.props.loadMore()
    }

    renderRows() {
        const listFrases = this.props.listFrases || []
        return listFrases.map((item, index) => (
            <Grid styleCss='frase' cols='12 12 12' key={item.id}>
                . . .
            </Grid>
        ))
    }

    render() {
        return (
            <Container>
                <Row>
                    <Grid cols='12 12 6' offsets='0 0 3' id='content'>
                        <Row id='frases'>
                            <InfiniteScroll
                                loadMore={this.props.loadMore}>
                                {this.renderRows()}
                            </InfiniteScroll>
                        </Row>
                    </Grid>
                </Row>
            </Container>
        );
    }
}

const mapStateToProps = state => ({ listFrases: state.frases.listFrases, user: state.auth.user })
const mapDispatchToProps = dispatch => bindActionCreators({ loadMore }, dispatch)
export default connect(mapStateToProps, mapDispatchToProps)(Frases)

frasesActions.js

import axios from 'axios'
import consts from '../consts'

export function getFrases(start, limit) {
    const request = axios.get(`${consts.OAPI_URL}/frases/${start}/${limit}`, axios.defaults)
    return request
}

export function loadMore() {
    console.log("chamou")
    return (dispatch, getState) => {
        let state = getState()
        let list = state.frases.listFrases;
        let tmpList;
        let pageNum = 0;
        let itemCount = 15;

        if (list.length == 0) {
            pageNum = 0
        } else {
            pageNum = list.length / itemCount + 1
        }

        getFrases(pageNum, itemCount).then(function (obj) {
            tmpList = list.concat(obj.data.frases)
            dispatch({
                type: 'FRASES_CARREGADO',
                payload: {data: {
                    frases: tmpList,
                    validToken: state.auth.validToken
                }}
            })
        })
    }
}

frasesReducer.js

const INITIAL_STATE = {
    listFrases: []
}

export default (state = INITIAL_STATE, action) => {
    switch (action.type) {
        case 'FRASES_CARREGADO':
            return { ...state,
                listFrases: action.payload.data.frases
            }
        default:
            return state
    }
}
No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.