React Redux-在动作道具上未定义的无限滚动调用

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?

Answer 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>