Ahoj lidi, jak se všichni máte? Doufám, že jste všichni v pořádku. Potýkám se s chybou Getting Uncaught TypeError: path.split není funkce v reakci. Zde jsem vám tedy vysvětlil všechna možná řešení.

Aniž byste plýtvali časem, začněme tímto článkem, který tuto chybu vyřeší.

Jak Getting Uncaught TypeError: path.split není funkce v reakci Tato chyba se vyskytuje?

Mám ověřovací formulář A snažím se ověřovat svůj formulář v reakci. Vybírám si react-hook-form. Ale neustále dostávám chyby Path.split is not a function. I po použití výchozího příkladu uvedeného na jejich webu dostávám stejnou chybu. Toto je výchozí kód uvedený na oficiálních stránkách.

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

A toto je moje 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>

Jak vyřešit Uncaught TypeError: path.split není funkce v Reagovat?

Question: How To Solve Uncaught TypeError: path.split není funkce v Reagovat?
Odpovědět: reagovat-hook-form aktualizován na 7.0.0 z 6.XX a má zásadní změny: Musíte nahradit všechny ref={register} za {…register(‚value_name‘)}.

Řešení 1

reagovat-hook-form aktualizován na 7.0.0 z 6.XX a má zásadní změny:

Stačí na všech místech nahradit řádek svým kódem.

ref={register}

na

{...register('value_name')}

Řešení 2

Vyzkoušejte toto. Za zmínku stojí, že pokud používáte material ui nebo něco podobného, ​​kde ref={ref} vyvolá chybu (protože očekává jiný název prop místo ref), možná chceš

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

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


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

Řešení 3

Jednoduchý vstup s Požadované a chybové hlášení funkce, nutné změny v aktualizaci:

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

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

Kromě opravy registru, pokud používáte chyby z useForm(), nyní chyby funkce je exportována z formState.

Letní

Je to všechno o tomto problému. Doufám, že vám všechna řešení hodně pomohla. Komentáře níže Vaše myšlenky a dotazy. Níže také napište, jaké řešení pro vás fungovalo?

Přečtěte si také