React Reduxデバッグの小道具

Question

私は反応が新しく、私はajaxの呼び出しを練習しようとしていましたが、私の小道具の機能を動作させることができません。私はFacebookの応答からjsonのデータを取得することができます、私はちょうどアクションにそれを渡すことはできません。簡潔にするために私はコードを整理しました。

ユーザーlist.js

class UserList extends Component { 

    responseFacebook(response) { 
     console.log(response); 
     this.props.login(response) 
    } 

    render() { 
     return (
      <div> 
       <FacebookLogin 
        appId="mysecretappid10239" 
        autoLoad={true} 
        fields="name,email,picture" 
        scope="public_profile,user_friends,user_actions.books" 
        callback={this.responseFacebook} 
       /> 
      </div> 
     ); 
    } 
} 

function mapStateToProps(state) { 
    return { 
     users: state.users.data, 
     fetched: state.users.fetched 
    }; 
} 

function matchDispatchToProps(dispatch){ 
    return bindActionCreators({login: login}, dispatch); 
} 

export default connect(mapStateToProps, matchDispatchToProps)(UserList); 

アクションファイル：

私はそれが動作するかどうかを確認するためにペイロードを印刷しようとしています。

export const login = (payload) => { 
    console.log("$$$$$$$$$$$$$$$$$$$$$$$" + payload) 
}; 

これは私が取得エラーです：

Uncaught TypeError: Cannot read property 'login' of undefined 

質問：

がどのように私はエラーを持たずに正しくこのパターンについては行くのですか？

Answer 1

変更callback={this.responseFacebook}~。

または、より良い方法では、constructorに結合します。

class UserList extends Component { 
    constructor(){ 
    super(); 
    this.responseFacebook = this.responseFacebook.bind(this); 
    } 
    responseFacebook(response) { 
     console.log(response); 
     this.props.login(response) 
    } 
    ...