2016-09-20 2 views
0

RN0.33、redux-form 6.0.5、クラスデコレータとasync/awaitを使用しています。投稿の検証に問題があります。フォームは破壊されたように見え、その値は失われます。submit submit各レンダリングサイクルでフォームが破棄される

いくつかのコードを教えてください。この場合

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

Formクラス

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

答えて

0

したがって、デフォルトであるreduxFormにdestroyOnUnmount:falseを指定しない限り、フォームは再描画されると破棄されます(新しい描画サイクル)。これらは一般的な出来事なので、私は実際にこれを取得しません。

関連する問題