this.props是未定义的导出函数组件

时间:2017-10-12 16:38:44

标签: reactjs

我使用此功能检查身份验证:

export function requireNoAuthentication(Component) {
    class notAuthenticatedComponent extends React.Component {

    constructor(props) {
        super(props);
        console.log(this.props);
        this.state = {
            loaded: false,
        };
    }

    componentWillMount() {
        this.checkAuth();
    }

    componentWillReceiveProps(nextProps) {
        this.checkAuth(nextProps);
    }

    checkAuth(props = this.props) {
        if (props.isAuthenticated) {
            browserHistory.push('/dashboard');
        } else {
            const token = localStorage.getItem('token');
            if (token) {
                var firebase = getFirebase();
                firebase.auth().onAuthStateChanged(function(token) {
                    if (token) {
                        this.props.loginUserSuccess(token);
                        browserHistory.push('/home');
                    } else {
                        this.setState({
                            loaded: true,
                        });
                    }
                });
            } else {
                this.setState({
                    loaded: true,
                });
            }
        }
    }

    render() {
        return (
            <div>
                {!this.props.isAuthenticated && this.state.loaded
                    ? <Component {...this.props} />
                    : null
                }
            </div>
        );

    }
}

notAuthenticatedComponent.propTypes = {
    loginUserSuccess: React.PropTypes.func,
    isAuthenticated: React.PropTypes.bool,
};

return connect(mapStateToProps, mapDispatchToProps)(notAuthenticatedComponent);
}

但是我不能说my.props在我的构造函数中是未定义的?我似乎无法找到有关将函数导出为类的任何信息。我做错了吗?如果你有建议我会喜欢这个输入

1 个答案:

答案 0 :(得分:1)

这可能是方法绑定问题尝试绑定构造函数中的 checkAuth 方法

constructor(props) {
    super(props);
    console.log(this.props);
    this.state = {
        loaded: false,
    };
    this.checkAuth = this.checkAuth.bind(this);
}