Bonjour les gars, comment allez-vous tous? J’espère que vous allez tous bien. je suis face à une erreur Obtention d’une erreur de type non interceptée : path.split n’est pas une fonction en réaction. Alors Me voici Expliquez-vous toutes les solutions possibles Ici.

Sans perdre votre temps, commençons cet article pour résoudre cette erreur.

Comment faire pour obtenir une erreur de type non interceptée : path.split n’est pas une fonction en réaction Cette erreur se produit ?

J’ai un formulaire de validation Et j’essaie de faire des validations pour mon formulaire en réaction. J’ai choisi react-hook-form. Mais je reçois constamment des erreurs Path.split is not a function. Même après avoir utilisé l’exemple par défaut donné sur leur site Web, j’obtiens la même erreur. C’est le code par défaut donné sur le site officiel.

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

Et ceci est ma forme

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

Comment résoudre une erreur de type non détectée : path.split n’est pas une fonction en réaction ?

Question : Comment résoudre une erreur de type non interceptée : path.split n’est pas une fonction dans react ?
Réponse: react-hook-form mis à jour vers la version 7.0.0 à partir de la version 6.XX et contient des modifications avec rupture : vous devez remplacer tous les ref={register} par {…register(‘value_name’)}.

solution 1

react-hook-form mis à jour vers 7.0.0 à partir de 6.XX et contient des modifications avec rupture :

Remplacez simplement la ligne par votre code à tous les endroits.

ref={register}

à

{...register('value_name')}

solution 2

Essayez ceci. Il convient de mentionner que si vous utilisez material ui ou quelque chose de similaire, où ref={ref} génère une erreur (car il attend un nom d’accessoire différent au lieu de ref), tu pourrais vouloir

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

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


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

solution 3

Simple saisir avec obligatoire et Message d’erreur fonctionnalités, modifications nécessaires dans la mise à jour :

A partir de la version 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>
  );
}

Vers la version 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>
  );
}

En plus d’enregistrer le correctif, si vous utilisez des erreurs de useForm(), maintenant les erreurs la fonction est exportée depuis formState.

Estival

Tout tourne autour de ce problème. J’espère que toutes les solutions vous ont beaucoup aidé. Commentez ci-dessous Vos pensées et vos questions. Aussi, commentez ci-dessous quelle solution a fonctionné pour vous?

A lire aussi