Question

我试图通过使用asyncValidate确保用户不会键入服务中已经存在的模板名称。 this.props.templateData是导入到我们的根缩减器中的模板缩减器，它实际上就是所谓的有效负载数据。 this.props.templateData是这样的：

import {GET_TEMPLATE_DATA} from './actions';

const DEFAULT_STATE = [];
const DEFAULT_ACTION = {};

export default (state = DEFAULT_STATE, action = DEFAULT_ACTION) => {
    switch (action.type) {
        case GET_TEMPLATE_DATA:
            return [...action.payload.data];
    }
    return state ? state : DEFAULT_STATE;
};

我们如何为此组件导入props到asyncValidate中以验证此信息。

export const asyncValidate = (values, props) => {
    console.log("HAHA: ", getTemplateData())
    return new Promise((resolve, reject) => {
        // let status = props.getTemplateData;
        // let zip = props.zipCodeDetails;
        let templateNames = this.props.templateData;
        const templateName = templateNames.map(tempData => tempData.name);
        // Couldn't talk to the service
        if (templateName.includes(values)) {
            reject({name: 'This template name is already taken.'});
            // Template name is valid
        } else {
            resolve();
        }
    });

onSubmit() {
        asyncValidate(); 
        // console.log('YO TRY TO SUBMIT', asyncValidate(this.props.templateData));
        this.props.history.push('/create-new-template-attributes');
    }

<Field
   className="usaa-input"
   component={Textarea}
   label="Template Name"
   name="name"
   maxLength={128}
   minRows={1}
   validate={[required, templateValidator]}
   // onChange={this.asyncValidate}
/>

export default reduxForm({
    form: 'templateForm',
    destroyOnUnmount: false,
    asyncValidate,
    asyncBlurFields: ['name']
})(createTempPage);

ReduxForm：如何将asyncValidation与Redux表单字段一起使用

0 个答案: