Hola chicos, ¿cómo están todos? Espero que todos estéis bien. estoy enfrentando un error Obtener TypeError no detectado: path.split no es una función en reaccionar. Así que Aquí estoy Te explico todas las posibles soluciones Aquí.

Sin perder su tiempo, comencemos este artículo para resolver este error.

¿Cómo obtener TypeError no detectado: path.split no es una función en reaccionar Este error ocurre?

Tengo un formulario de validación y estoy tratando de hacer validaciones para mi formulario en reacción. Elegí react-hook-form. Pero constantemente recibo un error Path.split is not a function. Incluso después de usar el ejemplo predeterminado dado en su sitio web, recibo el mismo error. Este es el código predeterminado dado en el sitio 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

Y esta es mi 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>

¿Cómo resolver TypeError no detectado: path.split no es una función en reaccionar?

Pregunta: ¿Cómo resolver TypeError no detectado: path.split no es una función en reaccionar?
Responder: react-hook-form actualizado a 7.0.0 desde 6.XX y tiene cambios importantes: debe reemplazar todo ref={register} con {…register(‘value_name’)}.

Solución 1

react-hook-form actualizado a 7.0.0 desde 6.XX y tiene cambios importantes:

Simplemente reemplace la línea con su código en todos los lugares.

ref={register}

a

{...register('value_name')}

Solución 2

Prueba esto. Vale la pena mencionar que si está utilizando material ui o algo similar, donde ref={ref} arroja un error (porque espera un nombre de accesorio diferente en lugar de ref), tu podrías querer

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

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


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

Solución 3

Simple aporte con requerido y mensaje de error características, cambios necesarios en la actualización:

A partir de la versión 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>
  );
}

A la versión 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>
  );
}

Además de corregir el registro, si usa errores de useForm(), ahora errores la característica se exporta desde formularioEstado.

Veraniego

Se trata de este problema. Espero que toda la solución te haya ayudado mucho. Comenta abajo Tus pensamientos y tus consultas. Además, comente a continuación qué solución funcionó para usted.

Leer también