我如何让validator.js 在反应中工作？

问题描述

我对反应还很陌生。我有一个需要电子邮件验证的问题，我找到了一个名为 validator.js 的 npm 包来处理它。所以我构建了一个包含电子邮件地址的自定义古腾堡 wordpress 块。我必须在验证器中调用的代码似乎使块停止渲染。代码如下：

import { __ } from '@wordpress/i18n';
import { SimpleText,textformats } from '../../components/SimpleText';
import validator from 'validator';

/**
 * @typedef {Object} ContactAttrs
 * @property {'full'} align
 * @property {string} contactName
 * @property {string} contactInfo
 */

/**
 * @param {import('@wordpress/blocks').BlockEditProps<ContactAttrs>} props
 */

const isValidEmail = validator.isEmail( contactInfo );

export function ContactEdit( { className,attributes,setAttributes } ) {
    return (
        <div className={ className }>
            <div className="block-align__wrapper">
                <SimpleText
                    identifier="contactName"
                    tagName="h5"
                    value={ attributes.contactName }
                    onChange={ ( contactName ) => setAttributes( { contactName } ) }
                    placeholder={ __( 'Enter contact name' ) }
                />
                <SimpleText
                    identifier="contactInfo"
                    tagname="a"
                    value={ attributes.contactInfo }
                    allowedFormats={ textformats.LINK }
                    onChange={ ( contactInfo ) => setAttributes( { contactInfo } ) }
                    placeholder={ __( 'Enter email address' ) }
                />
                { isValidEmail ? <div className="error">invalid email</div> : null }
            </div>
        </div>
    );
}

当我删除 validatoir.js 的东西时，块就起作用了。有什么遗漏吗？

解决方法

我认为这是因为 contactInfo 未在范围中定义。我认为应该是attributes.contactInfo。另外你需要把const isValidEmail = validator.isEmail( contactInfo );移到ContactEdit里面，把它放在return语句之前。