Привет, ребята, как вы все? Надеюсь, вы все в порядке. я столкнулся с ошибкой Получение Uncaught TypeError: path.split не является функцией в реакции. Итак, вот я объясню вам все возможные решения здесь.

Не теряя времени, давайте начнем эту статью, чтобы решить эту ошибку.

Как получить Uncaught TypeError: path.split не является функцией, реагирующей на эту ошибку?

У меня есть форма проверки, и я пытаюсь выполнить проверку своей формы в ответ. Я выбрал react-hook-form. Но я постоянно получаю ошибку Path.split is not a function. Даже после использования примера по умолчанию, приведенного на их веб-сайте, я получаю ту же ошибку. Это код по умолчанию, указанный на официальном сайте.

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

export default function App() {
  const { register, handleSubmit, watch, errors } = useForm();
  const onSubmit = data => console.log(data); //Console Log

И это моя форма

    <form onSubmit={handleSubmit(onSubmit)}>
    {/* register your input into the hook by invoking the "register" function */}
      <input name="example" defaultValue="test" ref={register} />
      
      {/* include validation with required or other standard HTML validation rules */}
      <input name="exampleRequired" ref={register({ required: true })} />
      {/* errors will return when field validation fails  */}
      {errors.exampleRequired && <span>This field is required</span>}
      
      <input type="submit" />
    </form>

Как решить Uncaught TypeError: path.split не является функцией в реакции?

Вопрос: Как решить Uncaught TypeError: path.split не является функцией в реакции?
Отвечать: react-hook-form обновлен до 7.0.0 с 6.XX и имеет критические изменения: вы должны заменить все ref={register} на {…register(‘value_name’)}.

Решение 1

react-hook-form обновлен до 7.0.0 с 6.XX и имеет критические изменения:

Просто замените строку своим кодом во всех местах.

ref={register}

к

{...register('value_name')}

Решение 2

Попробуйте это. Стоит упомянуть, что если вы используете материальный пользовательский интерфейс или что-то подобное, где ref={ref} выдает ошибку (потому что он ожидает другое имя реквизита вместо ref), возможно, вы захотите

import { TextField } from '@material-ui/core';

const { ref, ...rest } = register('value_name')


return (
 <TextField inputRef={red} {...rest} />
)

Решение 3

Простой вход с требуется а также сообщение об ошибке особенности, необходимые изменения в обновлении:

Начиная с версии 6.xx

function MyComponent(props) {
  const { register, handleSubmit, errors } = useForm();

  const onSubmit = (values) => {...};

  return (
    <div>
      <form onSubmit={handleSubmit(onSubmit)}>
        <input
          name="message"
          autoComplete="off"
          ref={register({
            required: "Required",
          })}
        />
        {errors.message && errors.message.message}
        <input type="submit" />
      </form>
    </div>
  );
}

До версии 7.xx

function MyComponent(props) {
  const { register, handleSubmit, formState: { errors }} = useForm();

  const onSubmit = (values) => {...};

  return (
    <div>
      <form onSubmit={handleSubmit(onSubmit)}>
        <input
          name="message"
          autoComplete="off"
          {...register("message", {
            required: "Required",
          })}
        />
        {errors.message && errors.message.message}
        <input type="submit" />
      </form>
    </div>
  );
}

В дополнение к исправлению регистра, если вы используете ошибки из useForm(), теперь ошибки функция экспортируется из formState.

летний

Это все об этом вопросе. Надеюсь, все решение вам очень помогло. Комментарий ниже Ваши мысли и ваши вопросы. Кроме того, прокомментируйте ниже, какое решение сработало для вас?

Также читайте