React Redux - 无限滚动调用undefined on动作道具

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); 

问题是当页面加载时总是返回我Uncaught TypeError: Cannot read property 'fetchBrands' of undefined。但是如果我删除loadMore()函数，它会成功渲染而不会出错。

解决方案是什么？

Answer 1

可能是范围问题。调用loadMore适当范围或使用autobind装饰（https://www.npmjs.com/package/core-decorators）

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