0
Ich benutze RN0.33, redux-form 6.0.5, Klasse Dekorateure und async/erwarten. Ich habe Probleme mit der Validierung von Übermittlungen. Die Form scheint zerstört zu werden und ihre Werte gehen verloren.submit Validierung zerstört Form mit jedem Render-Zyklus
Lassen Sie mich Ihnen etwas Code zeigen.
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-Klasse
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>
);
}
}
In diesem Fall gibt die Aktion ein Objekt, das wie folgt aussieht:
{
errors:[
{username:'Your username is wrong'}
]
{
Was ich sehe, ist dies: (die erste Zeile ist Die dbg-Ausgabeanweisung)
