Mr
4 سال پیش توسط Mr مطرح شد
4 پاسخ

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

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


reactjs
تگ‌های محبوب
لاراول
php
laravel
متفرقه
reactjs
عمومی
html_css
nodejs
vuejs
وردپرس
پایتون
css
فلاتر
react
javascript
ثبت پرسش جدید
علیرضا اصلانی
تخصص : Web and Mobile Developer
@aaslani 4 سال پیش مطرح شد
1

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

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;

Mr
@Mr.vviruss 4 سال پیش مطرح شد
0

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


علیرضا اصلانی
تخصص : Web and Mobile Developer
@aaslani 4 سال پیش آپدیت شد
0

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

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

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


Mr
@Mr.vviruss 4 سال پیش آپدیت شد
0

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


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام