javascript - Intégration du formulaire Antd et du Redux, comment gérer simultanément la validation front-end et back-end?

Question

Un projet sur lequel je travaillais récemment utilisait Antd et reac-redux, et il y avait une mention de formulaire dedans. Mon exigence est d'effectuer une validation frontale lorsque l'utilisateur entre. L'attribut getFieldDecorator；当用户提交表单之后，将后端返回的错误信息对应到表单中，这里使用了Antd提供的自定义校验，即FormItem的help和validateStatus fourni par Antd est utilisé ici.

Mais j'ai découvert que lorsque j'utilise la vérification personnalisée, getFieldDecorator就不在起作用了。那如果想使用getFieldDecoratorverification et que je souhaite utiliser la vérification personnalisée lorsque le backend renvoie des données, comment dois-je gérer cela ?

Merci à tous d'avance.

Extrait de code ci-joint :

Composants de l'interface utilisateur

    submitLogin = (e) => {
        e.preventDefault();
        // 前端验证
        this.props.form.validateFields((err, values) => {
            if (!err) {
                // 前端验证无误，向后端提交
                this.props.submitLoginForm(values);
            }
        });
    };
    render() {
        const { getFieldDecorator } = this.props.form;
        // 后端返回结果
        const access = this.props.loginState.results;
        const rulesGenerate = {
            email: getFieldDecorator('email', {
                        rules: [
                            { required: true, message: '请填写邮箱' },
                            { type: 'email', message: '邮箱格式不对' },
                        ]
                    })
        };
        // 服务器返回的数据是否有error
        const errors = access.error?access.error:false;
        return (
            <Form onSubmit={this.submitLogin} className="login-form">
                <FormItem
                    className="login-form__item"
                    validateStatus={errors&&errors.email?'error':''}
                    help={errors&&errors.email?errors.email:''}
                >
                    {rulesGenerate.email(
                        <Input addonBefore={<Icon fontSize="20" type="user" />} placeholder="用户名 / ID / 手机号" />
                    )}
                </FormItem>
            </Form>
       );

Composant conteneur

// 传送state到UI组件的props
const mapStateToProps = (state) => {
    return {
        loginState: state.loginReducer
    }
}

// 派发事件
const mapDispatchToProps = (dispatch) => {
    return {
        submitLoginForm: (values) => {
            dispatch(loginProcessing(values))
        }
    }
}

// 连接UI组件
const ShowForm = connect( mapStateToProps,mapDispatchToProps )(Login)

Action

// start fetching data
export const LOGIN_STARTING = 'LOGIN_STARTING'
function loginStarting(isLogging) {
    return {
        type: LOGIN_STARTING,
        isLogging
    }
}
// fetched data successfully
export const LOGIN_SUCCEEDED = 'LOGIN_SUCCEEDED'
function loginSucceeded(isLogging,results,fields) {
    return {
        type: LOGIN_SUCCEEDED,
        isLogging,
        results,
        fields
    }
}
// meet some errors after fetching
export const LOGIN_FAILED = 'LOGIN_FAILED'
function loginFailed(isLogging,results) {
    return {
        type: LOGIN_FAILED,
        isLogging,
        results
    }
}

export function loginProcessing(values) {
    return function (dispatch, getState) {
        let loginData = new FormData();
        loginData.append('email', values.email);

        dispatch(loginStarting(true));
        return fetch(`api/login`,{
            method: 'POST',
            body: loginData
        })
        .then(response => response.json())
        .then(response =>{
            return dispatch(loginSucceeded(false,response,values))
        }).catch(error =>
            dispatch(loginFailed(false,error))
        );
    }
}

Réducteur

import
{
    LOGIN_STARTING,
    LOGIN_SUCCEEDED,
    LOGIN_FAILED
} from '../action.js';

const initialState = {
  isLogging: false,
  results: {},
  fields: {}
};

export default function formReducer(state = initialState, action) {
    switch (action.type) {
        case LOGIN_STARTING:
              return Object.assign({}, state, {
                isLogging: action.isLogging
              })
        case LOGIN_SUCCEEDED:
              return Object.assign({}, state, {
                isLogging: action.isLogging,
                   results: action.results,
                   fields: action.fields
            })
        case LOGIN_FAILED:
              return Object.assign({}, state, {
                isLogging: action.isLogging,
                   results: action.results
            })
        default:
              return state;
    }
}

Answer 1

Utilisez la méthode this.props.form的setFields, exemple officiel : server-validate