68
votes

Obtenir un type de type UNPRAGE: PATH.Split n'est pas une fonction de réaction

J'essaie de faire des validations pour ma forme dans React. J'ai choisi la bibliothèque "React-Hook-Form". Mais j'obtiens constamment une erreur "Path.split n'est pas une fonction. Même après avoir utilisé l'exemple par défaut donné dans leur site Web, j'obtiens la même erreur. Ceci 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(watch("example")); // watch input value by passing the name of it

  return (
    {/* "handleSubmit" will validate your inputs before invoking "onSubmit" */}
    <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>
  );
}

react-hook-form

5 commentaires

Pouvez-vous partager un codes et boîte qui reproduit le problème?

Salut @arunkumarmohan Voici le lien " codesandbox.io/live/ljesmy8 "

On dirait que vous avez partagé une URL de session au lieu d'une URL de codes et de la boîte. Je viens de répondre à une question similaire ici Cela devrait résoudre le problème. Remplacer ref = {registre} par {... registre ('example')} .

Ouais ça marche. Merci @arunkumarmohan. Je n'ai pas vu de documents de migration.

Je vous en prie.

5 Réponses :

146
votes

REACT-HOOK-FORM MODAT TO 7.0.0 à partir de 6.x.x et a des modifications de rupture:

Vous devez remplacer tout ref = {registre} par {... registre ('value_name')}

Exemple:

version 6.x.x:

<input {...register('test', { required: true })} />

5 commentaires

Vous pouvez exécuter le codemon npx @ hookform / codemod v7 / update-register

@Ethaan comment exécutez-vous la commande avec du fil?

@Twirlman La commande npx fonctionnera toujours même si vous utilisez du fil.

oui, comme le dit @braydenw, npx venez avec npm 5.2 +

Supposons que nous ayons un champ de saisie réutilisable comment nous passerons ce registre à cette fonction réutilisable

14
votes

vaut la peine de mentionner que si vous utilisez un matériau ui ou quelque chose de similaire, où ref = {ref} lance une erreur (car il attend un nom d'hélice différent au lieu de < Code> ref ), vous voudrez peut-être xxx

Il existe un guide de migration pour cela ici , mais ça vaut toujours la peine de mentionner

0 commentaires

25
votes

Entrée simple avec requise et erreurs.Message fonctionnalités, modifications nécessaires à la mise à jour:

à partir de la version 6.x.x:

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

0 commentaires

0
votes

import { useForm } from "react-hook-form";
export default function App() {
const { register, formState: { errors }, handleSubmit } = useForm();

return (
  <form onSubmit={handleSubmit(onSubmit)}>
   <input {...register("firstName", { required: true })} />
   {errors.firstName?.type === 'required' && "First name is required"}
  
   <input {...register("lastName", { required: true })} />
   {errors.lastName && "Last name is required"}
  
   <input type="submit" />
  </form>
 );
 }

2 commentaires

Comme il est actuellement écrit, votre réponse n'est pas claire. S'il vous plaît modifier pour ajouter des détails supplémentaires qui aideront les autres à comprendre comment cela répond à la question posée. Vous pouvez trouver plus d'informations sur la façon d'écrire de bonnes réponses dans le centre d'aide .

cela donne des erreurs

0
votes

Comme indiqué ci-dessus, il y a des modifications à la façon dont registre doit être utilisé dans v7

Si vous obtenez toujours des erreurs, assurez-vous que id est en fait une string et pas tout autre type comme un nombre.

   <input {...register(id)} />

0 commentaires