提交验证会在每个渲染周期中销毁表单
submit validation destroys form with each render cycle
我正在使用 RN0.33、redux-form 6.0.5、class 装饰器和 async/await。我在提交验证时遇到问题。表单似乎被破坏了,它的值也丢失了。
让我给你看一些代码。
export async function asyncValidate(action, dispatch, options = {}){
try{
dispatch(hideFormException());
if(!options.hideSpinner)
dispatch(showSpinner());
const result = await dispatch(action);
dbg(result);
if(Object.keys(result.errors).length > 0){
throw {validation:result.errors};
}
return result;
}catch(err){
if(err && err.validation){
dispatch(showFormException());
throw new SubmissionError(convertErrors(err.validation));
}
exceptionHandler(err,dispatch);
throw new SubmissionError(err);
}finally{
if(!options.hideSpinner)
dispatch(hideSpinner());
}
}
表格class
function validate(data){
const errors = {};
validation.required(data, 'password', errors)
validation.email(data, 'username', errors);
return errors;
}
@reduxForm({
form: 'login',
validate: validate,
onSubmit:(data, dispatch) => formFunctions.asyncValidate(loginUser(data.username, data.password), dispatch)
})
export default class LoginForm extends React.Component {
constructor(props){
super(props);
this.state = {
showPassword:false
};
this.submit = this.submit.bind(this);
this.showPassword = this.showPassword.bind(this);
}
submit(){
this.props.handleSubmit();
}
onSubmitSuccess(){
this.props.dispatch(initialize('login', {password:null},true));
}
field(field){
return (
<TextInputField field={field}/>
);
}
render() {
return (
<View>
<View style={stylesheet.cardBody}>
<Field
name="username"
component={this.field}
placeholder="Email"
type="text"
keyboardType="email-address"
normalize={this.lowerCase}
/>
<Field
name="password"
component={this.field}
placeholder={getMessage('ui.password')}
type="password"
secureTextEntry={!this.state.showPassword}
/>
</View>
<View style={stylesheet.cardActions}>
<View style={stylesheet.btnBox}>
<FullWidthButton
onPress={this.submit}
>
<Text>{getMessage("ui.login").toUpperCase()}</Text>
</FullWidthButton>
</View>
</View>
</View>
);
}
}
在这种情况下,操作 returns 一个看起来像这样的对象:
{
errors:[
{username:'Your username is wrong'}
]
{
我看到的是这样的:(第一行是dbg输出语句)
因此,除非您在默认情况下在 reduxForm 中指定 destroyOnUnmount:false,否则如果重新呈现(新呈现周期),表单将被销毁。由于这些都是常见事件,我不太明白。
我正在使用 RN0.33、redux-form 6.0.5、class 装饰器和 async/await。我在提交验证时遇到问题。表单似乎被破坏了,它的值也丢失了。
让我给你看一些代码。
export async function asyncValidate(action, dispatch, options = {}){
try{
dispatch(hideFormException());
if(!options.hideSpinner)
dispatch(showSpinner());
const result = await dispatch(action);
dbg(result);
if(Object.keys(result.errors).length > 0){
throw {validation:result.errors};
}
return result;
}catch(err){
if(err && err.validation){
dispatch(showFormException());
throw new SubmissionError(convertErrors(err.validation));
}
exceptionHandler(err,dispatch);
throw new SubmissionError(err);
}finally{
if(!options.hideSpinner)
dispatch(hideSpinner());
}
}
表格class
function validate(data){
const errors = {};
validation.required(data, 'password', errors)
validation.email(data, 'username', errors);
return errors;
}
@reduxForm({
form: 'login',
validate: validate,
onSubmit:(data, dispatch) => formFunctions.asyncValidate(loginUser(data.username, data.password), dispatch)
})
export default class LoginForm extends React.Component {
constructor(props){
super(props);
this.state = {
showPassword:false
};
this.submit = this.submit.bind(this);
this.showPassword = this.showPassword.bind(this);
}
submit(){
this.props.handleSubmit();
}
onSubmitSuccess(){
this.props.dispatch(initialize('login', {password:null},true));
}
field(field){
return (
<TextInputField field={field}/>
);
}
render() {
return (
<View>
<View style={stylesheet.cardBody}>
<Field
name="username"
component={this.field}
placeholder="Email"
type="text"
keyboardType="email-address"
normalize={this.lowerCase}
/>
<Field
name="password"
component={this.field}
placeholder={getMessage('ui.password')}
type="password"
secureTextEntry={!this.state.showPassword}
/>
</View>
<View style={stylesheet.cardActions}>
<View style={stylesheet.btnBox}>
<FullWidthButton
onPress={this.submit}
>
<Text>{getMessage("ui.login").toUpperCase()}</Text>
</FullWidthButton>
</View>
</View>
</View>
);
}
}
在这种情况下,操作 returns 一个看起来像这样的对象:
{
errors:[
{username:'Your username is wrong'}
]
{
我看到的是这样的:(第一行是dbg输出语句)
因此,除非您在默认情况下在 reduxForm 中指定 destroyOnUnmount:false,否则如果重新呈现(新呈现周期),表单将被销毁。由于这些都是常见事件,我不太明白。