Ciao ragazzi, come state? Spero che stiate tutti bene. Sto affrontando un errore Ottenere un errore di tipo non rilevato: path.split non è una funzione in react. Quindi eccomi qui ti spiego tutte le possibili soluzioni.

Senza perdere tempo, iniziamo questo articolo per risolvere questo errore.

Come ottenere un errore di tipo non rilevato: path.split non è una funzione in react Questo errore si verifica?

Ho un modulo di convalida e sto cercando di fare le convalide per il mio modulo in risposta. Ho scelto react-hook-form. Ma ricevo costantemente errori Path.split is not a function. Anche dopo aver utilizzato l’esempio predefinito fornito nel loro sito Web, ricevo lo stesso errore. Questo è il codice predefinito fornito nel sito ufficiale.

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 questa è la mia 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>

Come risolvere un errore di tipo non rilevato: path.split non è una funzione in react?

Domanda: come risolvere un errore di tipo non rilevato: path.split non è una funzione in react?
Risposta: react-hook-form aggiornato a 7.0.0 da 6.XX e presenta modifiche sostanziali: devi sostituire tutto ref={register} con {…register(‘value_name’)}.

Soluzione 1

react-hook-form aggiornato a 7.0.0 da 6.XX e presenta modifiche sostanziali:

Sostituisci semplicemente la riga con il tuo codice in tutti i punti.

ref={register}

a

{...register('value_name')}

Soluzione 2

Prova questo. Vale la pena ricordare che se stai usando materiale ui o qualcosa di simile, dove ref={ref} genera un errore (perché si aspetta un nome prop diverso invece di ref), potresti volere

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

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


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

Soluzione 3

Semplice ingresso insieme a necessario e messaggio di errore caratteristiche, modifiche necessarie nell’aggiornamento:

Dalla versione 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>
  );
}

Alla versione 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>
  );
}

Oltre a registrare la correzione, se usi errori da useForm(), ora errori la funzione viene esportata da formState.

Estivo

È tutto su questo problema. Spero che tutte le soluzioni ti abbiano aiutato molto. Commenta qui sotto I tuoi pensieri e le tue domande. Inoltre, commenta di seguito quale soluzione ha funzionato per te?

Leggi anche