React中Uncaught TypeError: path.split is not a function问题求助

问题根源 #

你使用的是React Hook Form v7版本，该版本的register API与旧版（如v6）存在本质差异。你当前直接将校验规则对象传给register，但v7要求第一个参数必须是字段名字符串，校验规则需作为第二个参数传入，这就是触发报错的核心原因。

修复方案 #

1. 调整register调用格式：把字段名"email"作为第一个参数传入，校验规则放在第二个参数位置
2. 移除独立的name属性：register会自动为输入框注入name属性，重复设置可能引发冲突

修正后的代码片段：

import React from 'react';
import { useForm } from 'react-hook-form';

const EMAIL_PATTERN = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

const LoginForm = ({onSubmit}) => {
  // v7官方推荐从formState中解构errors，更符合API规范
  const { register, handleSubmit, formState: { errors } } = useForm();
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div className="form-group">
        <label htmlFor="email">Email</label>
        <input
          {...register("email", {required: true, pattern: EMAIL_PATTERN})}
          type="email"
          className="form-control"
          id="email" />
        { errors.email &&
          <div className="alert alert-danger"> 
            { errors.email.type === 'required' &&
              <span>Email is required!</span>
            }
            { errors.email.type === 'pattern' &&
              <span>Not valid email format!</span>
            }
          </div>
        }
      </div>
    </form>
  );
};

补充说明 #

• v7版本中errors已归入formState对象，虽然直接解构errors暂时可用，但官方推荐使用formState.errors的写法，确保代码长期兼容性
• 无需手动设置输入框的name属性，register会自动处理字段名绑定，避免重复配置导致的异常

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