Question

我使用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输出语句）

Answer 1

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

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

1 个答案: