javascript - Antd form 和 redux集成，如何同時處理前後端驗證？

Question

最近在做的一個專案使用了Antd和reac-redux，其中有一處表單提。我的需求是，當使用者輸入時進行前端驗證，這裡使用了Antd提供的getFieldDecorator；當使用者提交表單之後，將後端傳回的錯誤訊息對應到表單中，這裡使用了Antd提供的自訂校驗，即FormItem的help和validateStatus屬性。

但是我發現當使用自訂校驗時，getFieldDecorator就不在運作了。那如果想使用getFieldDecorator校驗，又想在後端回傳資料時使用自訂校驗，該如何處理呢？

提前謝謝各位。

附程式碼片段：

UI元件

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

容器元件

// 传送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))
        );
    }
}

Reducer

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

使用this.props.form的setFields方法，官方範例：server-validate