设置 react formik 验证后没有错误消息答案

【问题标题】：No error messages after setting react formik validation设置 react formik 验证后没有错误消息
【发布时间】：2021-10-12 08:28:34
【问题描述】：

我正在使用 react 和 formik。
我想为电话号码设置验证。
我想为电话号码设置验证，这样如果您输入的不是数字和连字符，就会显示错误。
我创建了一个验证函数，并在其中添加了一个电话号码验证，但是每次输入一个字符时，我都会收到以下错误，并且错误不显示验证错误。

错误

36 Uncaught (in promise) TypeError: Cannot create property 'telephoneNumber' on string ''

import React from 'react';
import {Input, Form} from 'antd';
import {useParams} from 'react-router';
import {useFormik} from 'formik';
import {useCreateMutation} from 'api';

export default () => {
  const {userId} = useParams<{
    userId: string;
  }>();

  const [create, {loading}] = useCreateMutation({
    onCompleted: () => {
      resetForm();
    },
  });

  const validate = (values: any) => {
    const phoneValidation = /^[0-9-]+$/;
    const errors: any = '';
    if (values.telephoneNumber.match(phoneValidation) === null) {
      errors.telephoneNumber = 'phone error';
      console.log(errors);
    }
    return errors;
  };


  const formik = useFormik({
    enableReinitialize: true,
    initialValues: {
      email: null,
      telephoneNumber: null,
    },
    validate: validate,
    onSubmit: (values) => {
      create({
        variables: {
          uuid: userId,
          attributes: values,
        },
      });
    },
  });

  const {values, errors, handleChange, handleBlur, handleSubmit, resetForm} =
    formik;

  const validationPhone = /^0\d{1,4}-\d{1,4}-\d{3,4}$/;
  return (
    <Form onFinish={handleSubmit}>
      <Form.Item label="e-mail">
        <Input
          name="email"
          value={values.email}
          onChange={handleChange}
          onBlur={handleBlur}
        />
      </Form.Item>

      <Form.Item label="phone">
        <Input
          name="telephoneNumber"
          value={values.telephoneNumber}
          onChange={handleChange}
          onBlur={handleBlur}
        />
         <div>{errors.telephoneNumber}</div>
      </Form.Item>
    </Form>
  );
};

【问题讨论】：

您将错误的默认值设置为空字符串，它应该是一个对象。

标签： reactjs typescript formik

【解决方案1】：

正如错误消息所说，您无法在空字符串'' 上创建属性telephoneNumber，但您将errors 初始化为const errors: any = '';

尝试将validate 函数中的errors 变量初始化为空对象，如formik docs for validate 中所述。 const errors = {};.

Here 是一个有效的堆栈闪电战，其中包含您给定的一些代码。

formik 文档中validate 函数的其他示例：

 // Synchronous validation
const validate = (values, props /* only available when using withFormik */) => {
  const errors = {};

  if (!values.email) {
    errors.email = 'Required';
  } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
    errors.email = 'Invalid email address';
  }

  //...

  return errors;
};

// Async Validation
const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));

const validate = (values, props /* only available when using withFormik */) => {
  return sleep(2000).then(() => {
    const errors = {};
    if (['admin', 'null', 'god'].includes(values.username)) {
      errors.username = 'Nice try';
    }
    // ...
    return errors;
  });
};

【讨论】：