无法在react-redux表示组件中使用操作

时间:2016-05-15 04:53:03

标签: javascript reactjs react-native redux react-redux

我是redux的新手,并且无法将我的头部缠绕在演示和容器组件上。

相关堆栈:

  • react v0.14.8
  • react-native v0.24.1
  • redux v3.5.2
  • react-redux v4.4.5

问题:

我有一个登录按钮组件,在呈现时会检查登录状态并调用onSuccessfulLogin操作,该操作会使用用户的Facebook凭据更新状态。

但是,当尝试将其分成单独的表示/容器组件时,我无法调用onSuccessfulLogin操作:Error: onSuccessfulLogin is not defined

我在这里做错了什么?我想象有一些简单的东西,我不理解两个组件和connect()函数之间的关系。

演示组件(Login.js)

import React, { PropTypes } from "react-native";
import FBLogin from "react-native-facebook-login";
import UserActions from "../users/UserActions";

class LoginPage extends React.Component {

    render() {

        const { userData, onSuccessfulLogin } = this.props;

        return (
          <FBLogin
              permissions={["email","user_friends"]}
              onLoginFound= { data => {
                  onSuccessfulLogin(data.credentials);
              }}
              />
        )
    }
};

export default LoginPage;

容器组件(LoginContainer.js)

import { connect } from 'react-redux';
import LoginPage from "../login/LoginPage";
import UserActions from "../users/UserActions";

const mapDispatchToProps = (dispatch) => {
  return {
    onSuccessfulLogin: (userData) => {
      dispatch(UserActions.userLoggedIn(userData))
    }
  }
}

const mapStateToProps = (state) => {
  return {
    userData: state.userData
  }
}

const LoginContainer = connect(
  mapStateToProps,
  mapDispatchToProps
)(LoginPage);

export default LoginContainer;

此外,如果我想让state.userData组件可以访问更新的LoginPage,我该怎么做?任何帮助表示赞赏!

已解决!使用ES6课程时,您需要在构造函数方法中调用super(props)才能访问连接的演示文稿组件中的容器属性:

class LoginPage extends React.Component {
    constructor(props){
        super(props);
    }

    render(){    
        // ...
    }
}

1 个答案:

答案 0 :(得分:2)

您的容器组件应该是组件,并且必须具有渲染功能以及要渲染的哑/表现组件。

padding