React Redux - Infinite Scroll call undefined on action props

Question

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { actions, getBrands } from '../reducer';
import Infinite from 'react-infinite';
import SearchBox from '../components/SearchBox';
import CardList from '../components/CardList';

const { fetchBrands } = actions;

class BrandList extends Component {
    componentDidMount() {
        this.props.fetchBrands({ page: 1 });
    }

    renderList() {
        const brands = this.props.brands;
        return brands.map((brand) => {
            return (
                <CardList key={brand.id} name={brand.name} avatar={brand.avatar.thumbnail} follower={brand.follows_count} />
            );
        });

    }

    toggle() {
        return this.props.isFetching;
    }

    loadMore() {
        this.props.fetchBrands({ page: 2 });
    }

    render() {
        return (
            <div>
                <SearchBox />

                <div className="row">
                    <Infinite
                        elementHeight={145}
                        onInfiniteLoad={this.loadMore}
                        infiniteLoadBeginBottomOffset={200}
                        isInfiniteLoading={this.toggle()}
                        useWindowAsScrollContainer
                        >
                        {this.renderList()}
                    </Infinite>
                </div>
            </div>
        );
    }
}

function mapStateToProps(state) {
    return {
        brands: getBrands(state),
        isFetching: state.brand.isFetching
    };
}

export default connect(mapStateToProps, { fetchBrands })(BrandList);

The problem is when the page is load it always return me Uncaught TypeError: Cannot read property 'fetchBrands' of undefined. But if I remove loadMore() function it successfully render without error.

What's the solution?

you forgot to bind load more function. onInfiniteLoad={this.loadMore.bind(this)} — duwalanise
– duwalanise, Commented Dec 7, 2016 at 3:37

vijay · Accepted Answer · 2016-12-07 03:37:37Z

1

may be scope problem. call loadMore with proper scope or use autobind decorator (https://www.npmjs.com/package/core-decorators)

 <Infinite
        elementHeight={145}
        onInfiniteLoad={() => this.loadMore()}
        infiniteLoadBeginBottomOffset={200}
        isInfiniteLoading={this.toggle()}
        useWindowAsScrollContainer >
        {this.renderList()}
 </Infinite>

answered Dec 7, 2016 at 3:37

vijay

6315 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React Redux - Infinite Scroll call undefined on action props

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related