我对React还是很陌生,但是我觉得这是一个非常基本的问题,我无法确定解决方案。我有一个登录表单,其中包含将登录数据作为Firebase通过电子邮件/密码登录的状态,并设法通过将其传递来使其工作。这些状态之一是错误,最初是用来确保输入的电子邮件和密码,但我想使用它来存储/显示任何Firebase错误。但是,当Firebase返回错误(密码错误,无用户等)时,我无法将其推回至LoginForm错误状态。有人可以帮忙吗?谢谢!
我有三个文件:
actions / auth.js :这将使用firebase处理登录。
export const startLogin = (loginData) => {
return () => {
return firebase.auth()
.signInWithEmailAndPassword(loginData.email, loginData.password)
.catch((error) => {
const errorCode = error.code;
const errorMessage = error.message;
console.log(errorCode, errorMessage);
if (errorCode == 'auth/user-not-found') {
console.log('User not found.');
} else if (errorCode == 'auth/wrong-password') {
console.log('Wrong password.');
} else if (errorCode == 'auth/network-request-failed') {
console.log('Network error.');
}
});
};
};
components / LoginPage.js :这是承载LoginForm组件的页面
export class LoginPage extends React.Component {
onSubmit = (loginData) => {
this.props.startLogin(loginData);
if (loginData.error == '') {
this.props.history.push('/dashboard');
} else {
console.log('ERROR DETECTED');
}
};
render() {
return(
<div className="box-layout">
<div className="box-layout__box">
<LoginForm
onSubmit={this.onSubmit}
/>
</div>
</div>
);
}
};
const mapDispatchToProps = (dispatch) => ({
startLogin: (loginData) => dispatch(startLogin(loginData))
});
export default connect(undefined, mapDispatchToProps)(LoginPage);
components / LoginForm.js :具有输入和状态的登录表单。
export default class LoginForm extends React.Component {
constructor(props) {
super(props);
this.state = {
email: '',
password: '',
error: ''
};
};
onEmailChange = (e) => {
const email = e.target.value;
this.setState(() => ({ email }));
};
onPasswordChange = (e) => {
const password = e.target.value;
this.setState(() => ({ password }));
};
onSubmit = (e) => {
e.preventDefault();
if (!this.state.email || !this.state.password) {
this.setState(() => ({ error: 'Please provide email and password.' }));
} else {
this.setState(() => ({ error: '' }));
this.props.onSubmit({
email: this.state.email,
password: this.state.password
});
}
};
render() {
return (
<form className="form" onSubmit={this.onSubmit}>
<label htmlFor="email">Email Address</label>
<input
className="text-input"
id="email"
name="email"
onChange={this.onEmailChange}
placeholder="Email address"
type="email"
/>
<label htmlFor="password">Password</label>
<input
className="text-input"
id="password"
name="password"
onChange={this.onPasswordChange}
placeholder="Password"
type="password"
/>
{this.state.error && <p className="form__error">{this.state.error}</p>}
<button className="button">Login</button>
</form>
);
};
}