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

React Redux调试道具

1 个答案: