我对响应和redux相当陌生，我试图使用redux-form创建一个注册/登录表单，有一个包含表单的组件，并且表单的字段根据用户的选择而动态变化。调用“ signup” react的“ setState（{signUpString：'signup'}））”，该操作将signUpString设置为signup，然后进一步使用“ validateSignupString（）”函数来确定要呈现（注册或登录）的字段。
现在，我最初将字符串设置为“ signup”，在此期间，当表单首次呈现一切正常时，我有一个validate（）函数，该函数使用在组件类外部定义的localSignUpString变量，其值为如果未填写任何表单字段，则this.state.signUpString的副本，并且此方法跟踪错误。但是，一旦我在触发setState（）的“登录”和“注册”链接之间切换时，整个验证突然失败，即使在没有字段填写的情况下，我也能够提交表单，从日志中发现，一旦我突然开始切换，字段的错误为“未定义”。
这让我发疯，我完全不知道如何解决此问题，这是表格的预期行为吗？如何保持我的验证完整？请帮忙。
我试图调整代码并应用某些日志语句来查找错误源，但是由于我对React和Redux的领域知识的限制，我找不到导致此问题的原因或这是否是预期的行为redux形式
import React from 'react';
import { Fields, reduxForm } from 'redux-form';
import { connect } from 'react-redux';
import '../../css/SignIn.css';
import { Link } from 'react-router-dom';
let localSignUpString = '';
class SignIn extends React.Component {
state = {signUpString: 'signup'};
componentDidMount() {
console.log('inside comp. mount')
}
componentDidUpdate() {
console.log('inside comp. update')
//console.log(this.state.signUpString);
if(this.state.signUpString === 'signup') {
document.getElementById('login-link').style.color = "white";
document.getElementById('signup-link').style.color = "blue";
console.log(document.getElementById('signup-link'));
}
else if(this.state.signUpString === 'login') {
document.getElementById('signup-link').style.color = "white";
document.getElementById('login-link').style.color = "blue";
console.log(document.getElementById('signup-link'))
}
}
renderError = (meta) => {
console.log(meta, 'meta')
if(meta.touched && meta.error) {
console.log(meta.error)
return (
<div>
<div style={{color: "white"}}>{meta.error}</div>
</div>
)
}
}
renderSignUpInput = (formProps) => {
// console.log('---inside signupInput---')
// console.log(formProps);
return (
<div className="signup-input-container">
<h3>SignUp For Free</h3>
<div className="signup-input-content">
<label>First Name</label><br></br>
<input {...formProps.firstName.input} type="text" autoComplete="off"></input>
<label>Last Name</label><br></br>
<input {...formProps.lastName.input} type="text" autoComplete="off"></input>
<label>Email</label><br></br>
<input {...formProps.email.input} type="email" autoComplete="off"></input>
<label>Password</label><br></br>
<input {...formProps.password.input} type="password" autoComplete="off"></input>
<label>Confirm Password</label><br></br>
<input {...formProps.password2.input} type="password" autoComplete="off"></input>
<button className="ui button primary">SignUp</button>
{this.renderError(formProps.firstName.meta)}
</div>
</div>
)
}
renderLoginInput = (formProps) => {
console.log(formProps, '---loginInput---')
return (
<div className="login-input-container">
<h3>Welcome Back!</h3>
<div className="login-input-content">
<label>Email</label><br></br>
<input {...formProps.email.input} type="email" autoComplete="off"></input>
<label>Password</label><br></br>
<input {...formProps.password.input} type="password" autoComplete="off"></input>
<button className="ui button primary">Login</button>
{this.renderError(formProps.email.meta)}
</div>
</div>
)
}
renderSignupForm = () => {
//console.log('---inside renderSignupForm---')
return (
<div className="signup-form-container">
<Fields names={["firstName", "lastName", "email", "password","password2"]}
component={this.renderSignUpInput}/>
</div>
)
}
renderLoginForm = () => {
return (
<div className="signin-form-container">
<Fields names={["email", "password"]} component={this.renderLoginInput}/>
</div>
)
}
validateSignUpString = (signUpString) => {
if(signUpString === 'signup') {
// document.getElementById("signup-link").style.color="red";
localSignUpString = signUpString;
//console.log(localSignUpString, '---inside validateSignUpString---')
return this.renderSignupForm();
}
else if(signUpString === 'login') {
localSignUpString = signUpString;
return this.renderLoginForm();
}
}
onSubmit = (formValues) => {
console.log('called onSubmit from SignIn', formValues);
}
render() {
//console.log(this.props);
return (
<div className="signin-container">
<div className="form-wrapper">
<form className="form" onSubmit={this.props.handleSubmit(this.onSubmit)}>
<ul className="tab-group">
<li className="tab-active">
<Link id="signup-link" to="/signin" className="link-text" onClick={() => this.setState({signUpString:'signup'})}>Sign Up</Link>
</li>
<li className="tab">
<Link id="login-link" to="/signin" className="link-text" onClick={() => this.setState({signUpString: 'login'})}>Login</Link>
</li>
</ul>
{this.validateSignUpString(this.state.signUpString)
}
</form>
</div>
</div>
)
};
};
const validate = (formValues) => {
console.log(formValues, '---inisde validate ---')
let emailValidater = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
let errors = {};
if(localSignUpString === 'signup') {
if(!formValues.firstName) errors.firstName = 'You must enter your first name.';
if(!formValues.lastName) errors.lastName = 'You must enter your last name.';
if(!formValues.email) errors.email = 'You must enter enter an email.';
if(formValues.email) {
if(!emailValidater.test(formValues.email.toLowerCase())) errors.email = 'Please enter a valid email.';
}
if(!formValues.password) errors.password = 'You must enter a password.';
if(!formValues.password2) errors.password2 = 'You must confirm your password.';
if(formValues.password) {
if(!formValues.password.length >= 8) errors.passwordLength = 'Passwod must be at least 8 characters.';
}
if(formValues.password!==formValues.password2) errors.mismatch = 'Passwords do not match.';
}
else if(localSignUpString === 'login') {
if(!formValues.email) errors.email = 'Please enter your email.';
if(formValues.email) {
if(!emailValidater.test(formValues.email.toLowerCase())) errors.email = 'Please enter a valid email.';
}
if(!formValues.password) errors.password = 'Please enter your password.';
}
return errors;
}
export default reduxForm({
form: 'signInCreate',
validate
})(SignIn);
我希望表单应该知道要呈现的字段，并自动应用为这些字段定义的验证。 请帮忙。