Hallo Leute, wie geht es euch allen? Hoffe es geht euch allen gut. Ich stehe vor einem Fehler Get Uncaught TypeError: path.split ist keine reagierende Funktion. Also hier bin ich Erkläre dir hier alle möglichen Lösungen.

Beginnen wir mit diesem Artikel, um diesen Fehler zu beheben, ohne Ihre Zeit zu verschwenden.

Wie Get Uncaught TypeError: path.split ist keine Funktion zur Reaktion auf diesen Fehler?

Ich habe ein Validierungsformular und ich versuche, Validierungen für mein Formular in React durchzuführen. Ich entschied mich react-hook-form. Aber ich bekomme ständig Fehler Path.split is not a function. Selbst nachdem ich das auf ihrer Website angegebene Standardbeispiel verwendet habe, erhalte ich denselben Fehler. Dies ist der Standardcode, der auf der offiziellen Website angegeben ist.

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

Und dies ist meine Form

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

So lösen Sie nicht erfassten TypeError: path.split ist keine Funktion in der Reaktion?

Frage: So lösen Sie nicht erfassten TypeError: path.split ist keine Funktion in der Reaktion?
Antworten: React-Hook-Form wurde von 6.XX auf 7.0.0 aktualisiert und enthält wichtige Änderungen: Sie müssen alle ref={register} durch {…register(‚value_name‘)} ersetzen.

Lösung 1

React-Hook-Form von 6.XX auf 7.0.0 aktualisiert und mit Breaking Changes:

Ersetzen Sie einfach an allen Stellen die Zeile durch Ihren Code.

ref={register}

zu

{...register('value_name')}

Lösung 2

Probieren Sie dies aus. Erwähnenswert ist, dass bei Verwendung von Material ui oder ähnlichem ref={ref} einen Fehler auslöst (weil es einen anderen Prop-Namen erwartet statt ref), Sie möchten vielleicht

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

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


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

Lösung 3

Einfach Eingang mit erforderlich und Fehlermeldung Funktionen, notwendige Änderungen im Update:

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

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

Zusätzlich zur Korrektur, wenn Sie Fehler von useForm() verwenden, jetzt registrieren Fehler Funktion wird aus exportiert FormularZustand.

Sommerlich

Es dreht sich alles um dieses Thema. Ich hoffe, alle Lösungen haben Ihnen sehr geholfen. Kommentieren Sie unten Ihre Gedanken und Ihre Fragen. Kommentieren Sie auch unten, welche Lösung für Sie funktioniert hat?

Lesen Sie auch