React Redux调试道具

Question

我是新手，我一直在尝试练习Ajax调用，但是我的props函数无法正常工作。 我能够从Facebook响应中获取json数据，但我无法将其传递给操作。 为了简洁起见，我精简了代码。

user-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)
    }
    ...