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}變爲callback={this.responseFacebook.bind(this)}。

或者，更好的是，在constructor中將其綁定。

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