提交验证会在每个渲染周期中销毁表单

时间:2016-09-20 15:01:42

标签: redux-form

我使用RN0.33,redux-form 6.0.5,类装饰器和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());
  }
}

表单类

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>
    );
  }
}

在这种情况下,操作返回一个如下所示的对象:

{
   errors:[
     {username:'Your username is wrong'} 
   ]
{

我所看到的是:(第一行是dbg输出语句)

enter image description here

1 个答案:

答案 0 :(得分:1)

因此,除非您在reduxForm中指定destroyOnUnmount:false,这是默认设置,否则表单将被重新呈现(新的渲染周期)。由于这些是常见现象,我真的不明白。