Ahojte chalani, ako sa všetci máte? Dúfam, že ste všetci v poriadku. Čelím chybe Getting Uncaught TypeError: path.split nie je funkcia v reakcii. Takže tu som, vysvetlím vám všetky možné riešenia.

Bez toho, aby ste strácali čas, začnime s týmto článkom na vyriešenie tejto chyby.

How Getting Uncaught TypeError: path.split nie je funkcia v reakcii Táto chyba sa vyskytuje?

Mám overovací formulár A snažím sa overiť svoj formulár v reakcii. vybral som si react-hook-form. Ale neustále dostávam chyby Path.split is not a function. Dokonca aj po použití predvoleného príkladu uvedeného na ich webovej stránke sa mi zobrazuje rovnaká chyba. Toto je predvolený kód uvedený na oficiálnej stránke.

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

Ako vyriešiť nezachytenú chybu typu: path.split nie je funkcia v reakcii?

Otázka: Ako vyriešiť nezachytenú chybu typu: path.split nie je funkcia v reakcii?
odpoveď: Reag-hook-form aktualizovaný na 7.0.0 z 6.XX a má prelomové zmeny: Všetky ref={register} musíte nahradiť {…register(‚value_name‘)}.

Riešenie 1

Reag-hook-form aktualizovaný na 7.0.0 z 6.XX a má prelomové zmeny:

Stačí nahradiť riadok svojim kódom na všetkých miestach.

ref={register}

do

{...register('value_name')}

Riešenie 2

Vyskúšajte toto. Stojí za zmienku, že ak používate materiálové používateľské rozhranie alebo niečo podobné, kde ref={ref} vyvolá chybu (pretože očakáva iný názov podpery namiesto ref), možno budete chcieť

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

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


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

Riešenie 3

Jednoduché vstup s požadovaný a chybná správa funkcie, potrebné zmeny v aktualizácii:

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

Okrem opravy registrácie, ak používate chyby z useForm(), teraz chyby funkcia je exportovaná z formState.

Letný

Všetko je o tejto problematike. Dúfam, že vám všetky riešenia veľmi pomohli. Komentujte nižšie Vaše myšlienky a otázky. Do komentára tiež uveďte, ktoré riešenie pre vás fungovalo?

Prečítajte si tiež