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

問題はページがロードされているときに常にUncaught TypeError: Cannot read property 'fetchBrands' of undefinedを返します。しかし、loadMore()機能を削除すると、エラーなく正常にレンダリングされます。

解決策は何ですか？

Answer 1

は、スコープに問題があります。あなたは、負荷に多くの機能をバインドするのを忘れて、適切な範囲でloadMoreを呼び出すか、自動バインドデコレータ（https://www.npmjs.com/package/core-decorators）

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