在将其作为操作调用时,这一特定的 firebase 功能对我不起作用。登录,编辑用户名,注册,所有这些工作都很好......除了注销。
在查看了一些教程和谷歌自己的文档之后,我认为这个函数可以像我实现的所有其他 firebase-auth 函数一样工作。
这是我对数据库的操作:
/* AuthUser.js */
export const login = credentials => {
return (dispatch, getState, { getFirebase }) => {
const firebase = getFirebase();
firebase
.auth()
.signInWithEmailAndPassword(credentials.email, credentials.password)
.then(() => {
dispatch({ type: LOGIN_SUCCESS });
dispatch(push('/home'));
})
.catch(err => {
dispatch({ type: LOGIN_FAIL, err });
});
};
};
export const logout = () => {
return (dispatch, getState, { getFirebase }) => {
const firebase = getFirebase();
firebase
.auth()
.signOut()
.then(() => {
dispatch({ type: LOGOUT_SUCCESS });
dispatch(push('/login'));
}) /* ERROR POINTS RIGHT AT THIS LINE */
.error(err => {
dispatch({ type: LOGOUT_FAIL, err });
});
};
};
export const register = user => {
return (dispatch, getState, { getFirebase }) => {
const firebase = getFirebase();
firebase
.auth()
.createUserWithEmailAndPassword(user.email, user.password)
.then(res => {
return res.user.updateProfile({
displayName: user.displayName,
});
})
.then(() => {
dispatch({ type: REGISTER_SUCCESS });
dispatch(push('/login'));
})
.catch(err => {
dispatch({ type: REGISTER_FAIL, err });
});
};
};
export const save = displayName => {
return (dispatch, getState, { getFirebase }) => {
const firebase = getFirebase();
const user = firebase.auth().currentUser;
if (displayName !== '') {
user
.updateProfile({
displayName,
})
.then(() => {
dispatch({ type: SETTINGS_NAME_CHANGED });
dispatch(push('/home'));
})
.catch(err => {
dispatch({ type: SETTINGS_ERROR, err });
});
} else {
dispatch({ type: SETTINGS_LEFT_ALONE });
dispatch(push('/home'));
}
};
};
这是我在调用其中一些函数的组件中设置连接的方式。
/* Settings.js */
import React from 'react';
import { /* Some Stuff */ } from 'reactstrap';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import 'someStyles.scss';
import { logout, save } from '../store/actions/authUser';
class Settings extends React.Component {
constructor(props) {
super(props);
this.state = {
displayName: '',
};
}
/* This doesn't! */
onLogout = event => {
event.preventDefault();
this.props.logout();
};
/* This works! */
onSubmit = event => {
event.preventDefault();
this.props.save(this.state.displayName);
};
onChange = event => {
this.setState({
[event.target.id]: event.target.value,
});
};
render() {
const { displayName } = this.state;
return (
<Container className=".settingsBody">
<nav>
<Nav>
<NavItem>
<NavLink href="https://github.com">GitHub</NavLink>
</NavItem>
<NavItem>
<NavLink>
<div onClick={this.onLogout.bind(this)}>Logout</div>
</NavLink>
</NavItem>
</Nav>
</nav>
<Form onSubmit={this.onSubmit.bind(this)}>
<FormGroup>
<Label for="displayName">Change Display Name</Label>
<Input
type="text"
name="text"
id="displayName"
placeholder={this.props.auth.displayName}
value={displayName}
onChange={this.onChange}
/>
</FormGroup>
<Button color="primary">Save Settings</Button>
</Form>
</Container>
);
}
}
Settings.propTypes = {
logout: PropTypes.func.isRequired,
save: PropTypes.func.isRequired,
authError: PropTypes.string,
auth: PropTypes.object,
};
const mapStateToProps = state => {
return {
authError: state.auth.authError,
auth: state.firebase.auth,
};
};
const mapDispatchToProps = dispatch => {
return {
logout: () => dispatch(logout()),
save: displayName => dispatch(save(displayName)),
};
};
export default connect(
mapStateToProps,
mapDispatchToProps
)(Settings);
React 抛出此错误:TypeError: firebase.auth(...).signOut(...).then(...).error is not a function
但其他函数在运行时按预期运行。
有什么我想念的吗?该代码将尝试导航到我想要的页面,但在该页面正确安装之前引发错误。