Olá Pessoal, tudo bem? Espero que todos estejam bem. estou enfrentando um erro Obtendo TypeError não capturado: path.split não é uma função em reagir. Então aqui estou eu explicar a você todas as soluções possíveis aqui.

Sem perder seu tempo, vamos começar este artigo para resolver este erro.

Como obter TypeError não capturado: path.split não é uma função em reagir Este erro ocorre?

Eu tenho um formulário de validação E estou tentando fazer validações para o meu formulário em react. Eu escolhi react-hook-form. Mas estou constantemente recebendo erro Path.split is not a function. Mesmo depois de usar o exemplo padrão fornecido em seu site, estou recebendo o mesmo erro. Este é o código padrão fornecido no site oficial.

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

E esta é a minha forma

    <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>

Como resolver TypeError não capturado: path.split não é uma função em reagir?

Descrição: Como resolver o erro de tipo não capturado: path.split não é uma função em react ?
Responda: react-hook-form atualizado para 7.0.0 de 6.XX e tem mudanças importantes: Você tem que substituir todos ref={register} por {…register(‘value_name’)}.

Solução 1

react-hook-form atualizado para 7.0.0 de 6.XX e tem mudanças importantes:

Basta substituir a linha pelo seu código em todos os lugares.

ref={register}

para

{...register('value_name')}

Solução 2

Experimente isso. Vale a pena mencionar que se você estiver usando material ui ou algo semelhante, onde ref={ref} lança um erro (porque espera um nome de prop diferente em vez de ref), você pode querer

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

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


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

Solução 3

Simples entrada com requeridos e mensagem de erro funcionalidades, mudanças necessárias na atualização:

Da versão 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>
  );
}

Para a versão 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>
  );
}

Além de registrar correção, se você usar erros de useForm(), agora erros recurso é exportado de estado do formulário.

verão

É tudo sobre esta questão. Espero que toda a solução tenha ajudado muito. Comente abaixo Seus pensamentos e suas dúvidas. Além disso, comente abaixo qual solução funcionou para você?

Leia também