description

error زمان استفاده از infinite scroll

- 3 ماه پیش
توسط علیرضا اصلانی آپدیت شد
بهروز عربلو ( 0 تجربه )
3 ماه پیش

توی اموزش ریکت از infinite scroll استفاده کردین و منم دارم از اون اسفاده میکنم و دقیقا از کد شما استفاده کردم برای این موضوع ولی خطا میده

×
TypeError: React.createClass is not a function
./node_modules/react-infinite-scroll/src/react-infinite-scroll.js.module.exports
node_modules/react-infinite-scroll/src/react-infinite-scroll.js:13
  10 |   return React.addons.InfiniteScroll;
  11 | }
  12 | React.addons = React.addons || {};
> 13 | var InfiniteScroll = React.addons.InfiniteScroll = React.createClass({
  14 |   getDefaultProps: function () {
  15 |     return {
  16 |       pageStart: 0,
بهروز عربلو ( 0 تجربه )
3 ماه پیش
import React, { Component } from 'react';
import axios from 'axios';
import Product from './../Product';
import InfiniteScroll from 'react-infinite-scroll';

class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {
            articles : [],
            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;
                console.log(data);
                this.setState(prevState => ({
                    articles: [ ...prevState.articles , ...data],
                    hasMore: current_page !== last_page,
                    nextPage : current_page + 1
                }))
            })
            .catch(error => {
                console.log(error)
            })
    }

    render() {
        return (
            <div>
                <div className="jumbotron rtl">
                    <h1>وبسایت راکت</h1>
                    <p>لورم ایپسوم یا طرح‌نما (به انگلیسی: Lorem ipsum) به متنی آزمایشی و بی‌معنی در صنعت چاپ، صفحه‌آرایی و طراحی گرافیک گفته می‌شود. طراح گرافیک از این متن به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه شکل ظاهری و کلی طرح سفارش گرفته شده استفاده می نماید، تا از نظر گرافیکی نشانگر چگونگی نوع و اندازه فونت و ظاهر متن باشد. معمولا طراحان گرافیک برای صفحه‌آرایی، نخست از متن‌های آزمایشی و بی‌معنی استفاده می‌کنند تا صرفا به مشتری یا صاحب کار خود نشان دهند که صفحه طراحی یا صفحه بندی شده بعد از اینکه متن در آن قرار گیرد چگونه به نظر می‌رسد و قلم‌ها و اندازه‌بندی‌ها چگونه در نظر گرفته شده‌است. از آنجایی که طراحان عموما نویسنده متن نیستند و وظیفه رعایت حق تکثیر متون را ندارند و در همان حال کار آنها به نوعی وابسته به متن می‌باشد آنها با استفاده از محتویات ساختگی، صفحه گرافیکی خود را صفحه‌آرایی می‌کنند تا مرحله طراحی و صفحه‌بندی را به پایان برند.</p>
                </div>
                <InfiniteScroll
                    className="row rtl"
                    pageStart={0}
                    loadMore={this.handleLoadMore.bind(this)}
                    hasMore={this.state.hasMore}
                    loader={<div className="loader">Loading ...</div>}
                >
                    {this.state.articles.map((product , index) => <Product product={product} key={index}/>)}
                </InfiniteScroll>

            </div>
        );
    }
}

export default Home;

کد فراخوانی هم اینه

علیرضا اصلانی ( 2543 تجربه )
3 ماه پیش

پکیج react-infinite-scroller نه react-infinite-scroll

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