0
RN0.33, redux-form 6.0.5, 클래스 데코레이터 및 async/await를 사용하고 있습니다. 제출 유효성 검사에 문제가 있습니다. 폼이 파괴 된 것처럼 보이고 값이 손실됩니다.제출 유효성 검사 양식이 각 렌더링주기마다 삭제됩니다.
몇 가지 코드를 알려 드리겠습니다.
{
errors:[
{username:'Your username is wrong'}
]
{
은 무엇 제가 보는 것은 이것이다 :
는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>
);
}
}
양식 클래스는 작업은 다음과 같습니다 개체를 반환 (첫 번째 줄은 dbg 출력 문)
