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