آفلاین
user-avatar

عدم بارگذاری در react infinite scroller در Reactjs

2 سال پیش
توسط Mr آپدیت شد
آفلاین
user-avatar
Mr ( 50 تجربه )
2 سال پیش

سلام
من یه کدی نوشتم که از کامپوننت react-infinite-scroller استفاده می‌کنم. فیلم‌های آموزشی آقا احسان رو هم دیدم. ولی نمی‌دونم چرا وقتی scroll می‌رسه آخر صفحه کامپوننت Load ام میاد ولی تابع LoadMore اجرا نمیشه تا دوباره به api درخواست بزنه.
به نظر می‌رسه که نمی‌فهمه که scroll صفحه به انتها رسیده باشه.
احتمال می‌دم به خاطر این باشه که div ای که بالاتر از کامپوننت مربوط به react-infinite-scroller باشه خاصیت overflow:auto داره که شامل چند کامپوننت دیگه میشه
اگر ممکنه بگین دقیقا کدوم قسمت باید overflow :auto بگیره تا درست کار کنه.
اگر فکر می‌کنید مشکل از جای دیگه می‌تونه باشه یا ممکنه نیاز به کد باشه بگین تا در اختیارتون بذارم
کد زیاد هستش برای همین اینجا نذاشتم
ممنونم

آفلاین
user-avatar
علیرضا اصلانی ( 11834 تجربه )
2 سال پیش
تخصص : Web and Mobile Developer

این کدشه بدون مشکلو اضافیاتی کار میکنه اگه بازم نتونستین کد خودتونو بذ ارید ببینیم مشکلش از کجاس

import React, { Component } from 'react';
import axios from 'axios';
import Product from './Product';
import InfiniteScroll from 'react-infinite-scroller';

class Products extends Component {

    constructor(props) {
        super(props);

        this.state = {
            products: [],
            nextPage: 1,
            hasMore: true
        }
    }

    handleLoadMore() {

        axios.get(`http://roocket.org/api/products?page=${this.state.nextPage}`).then(response => {

            const {current_page, last_page, data} = response.data.data;

            this.setState(prevState => {
                return {
                    products: [...prevState.products, ...data],
                    nextPage: current_page + 1,
                    hasMore: current_page !== last_page
                }
            })

        }).catch(err => {
            console.log(err);
        })
    }

    render() {
        return (
            <InfiniteScroll
                data-uk-grid
                data-uk-scrollspy="target: > div; cls:uk-animation-fade; delay: 200"
                pageStart={ this.state.nextPage }
                loadMore={ this.handleLoadMore.bind(this) }
                hasMore={ this.state.hasMore }
                loader={ <div data-uk-spinner="ratio: 3"/> }
            >
                { this.state.products.map((product, index) => <Product key={ index } product={ product }/>) }
            </InfiniteScroll>
        )
    }
}

export default Products;
آفلاین
user-avatar
Mr ( 50 تجربه )
2 سال پیش

خیلی ممنونم.
بله دوره رو که دانلود کرده بودم کدش رو هم دارم و بررسی کردم چندین مرتبه
کد خودم کمی زیاد هستش داخل لینک زیر می‌ذارم اگر ممکن هست نگاه کنید و جواب بدین
@aaslani
https://pastebin.com/MVdc310S
در ضمن کد هنوز خیلی کار داره و کامل نیست فقط روی همین بحث loading اش مشکل دارم فعلا...
سپاس‌گزارم

آفلاین
user-avatar
علیرضا اصلانی ( 11834 تجربه )
2 سال پیش
تخصص : Web and Mobile Developer

چیزی که تا الان تو کدتون متوجه شدم شما موقعه ی دریافت اطلاعات از سرور مستقیم hasMoreItems: false قرار دادین که این بعد اولین دریافت دیگه نمیذاره اطلاعات دریافت بشه شما اینو باید چک کنید وقتی رسیدید به آخرین صفحه اطلاعات اونوقت false بشه حالا برای تست کلا بذارین true باشه و ست کردن state رو کلا اینجوری بذارید چون اون کدی که شما نوشتید کلا اطلاعات بجای اضافه شدن به مقادیر قبلی کلا جایگزین میشه

this.setState(prevState => {
                return {
                    data: [...prevState.data, ...response.data]
                }
            })

باز اگه جواب نداد لاگ بگیرید ببینید اصلا چه اطلاعاتی توی state هاتون قرار گرفته

آفلاین
user-avatar
Mr ( 50 تجربه )
2 سال پیش

@aaslani
من معذرت می‌خوام یه تیکه از کد رو اشتباه گذاشتم
لطفا لینک زیر رو هم بررسی بفرمایید
https://pastebin.com/NEwhrbj8
کارهایی که گفتین رو اینجا انجام دادم ولی تابع handleLoadMore برای بار دوم اجرا نمیشه متاسفانه حتی log هم گرفتم ولی فقط یک بار برای بار اول اجرا میشه درحالی که مقدارhandleLoadMore مقدار true هستش

برای ارسال پاسخ باید وارد سایت شوید