React配置Formik手机号校验无报错提示且抛出TypeError异常问题

报错根因 #

你代码中的validate函数里，错误对象errors被错误初始化为空字符串：

const errors: any = '';

字符串属于JS原始类型，无法直接挂载自定义属性telephoneNumber，因此触发了你遇到的类型错误。

修复方案 #

把errors初始化为空对象，同时补全边界判断即可解决报错，同时正常展示校验提示：

const validate = (values: any) => {
  const phoneValidation = /^[0-9-]+$/;
  // 改为初始化为空对象
  const errors: any = {};
  // 补全边界判断，避免空值调用match方法报错
  if (values.telephoneNumber && !values.telephoneNumber.match(phoneValidation)) {
    errors.telephoneNumber = '仅允许输入数字和连字符';
  }
  return errors;
};

可选优化 #

你代码中还定义了格式更严格的固定电话正则/^0\d{1,4}-\d{1,4}-\d{3,4}$/，如果需要校验完整的固定电话格式，可以直接替换validate函数里的phoneValidation正则，实现更精准的校验。
如果要和Ant Design的Form组件样式适配更统一，可以把Formik的状态直接绑定到Form.Item属性上，不需要单独写错误提示容器：

<Form.Item 
  label="phone"
  help={errors.telephoneNumber}
  validateStatus={errors.telephoneNumber ? 'error' : ''}
>
  <Input
    name="telephoneNumber"
    value={values.telephoneNumber}
    onChange={handleChange}
    onBlur={handleBlur}
  />
</Form.Item>

内容的提问来源于stack exchange，提问作者aahhuhuhu