Cześć chłopaki, jak się macie? Mam nadzieję, że wszystko w porządku. Mam do czynienia z błędem Uzyskiwanie Uncaught TypeError: path.split nie jest funkcją w reakcji. Więc tutaj wyjaśnię ci wszystkie możliwe rozwiązania tutaj.

Nie marnując czasu, zacznijmy od tego artykułu, aby rozwiązać ten błąd.

Jak Get Uncaught TypeError: path.split nie jest funkcją w React This Error Occurs ?

Mam formularz walidacyjny I próbuję wykonać walidacje dla mojego formularza w odpowiedzi. wybieram react-hook-form. Ale ciągle otrzymuję błąd Path.split is not a function. Nawet po użyciu domyślnego przykładu podanego na ich stronie internetowej otrzymuję ten sam błąd. To jest domyślny kod podany na oficjalnej stronie.

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

Jak rozwiązać Uncaught TypeError: path.split nie jest funkcją w reakcji?

Pytanie: Jak rozwiązać Uncaught TypeError: path.split nie jest funkcją w reakcji?
Odpowiadać: React-hook-form zaktualizowany do 7.0.0 z 6.XX i zawiera istotne zmiany: Musisz zastąpić wszystkie ref={register} na {…register(’value_name’)}.

Rozwiązanie 1

React-hook-form zaktualizowany do 7.0.0 z 6.XX i zawiera przełomowe zmiany:

Po prostu zastąp linię swoim kodem we wszystkich miejscach.

ref={register}

do

{...register('value_name')}

Rozwiązanie 2

Wypróbuj to. Warto wspomnieć, że jeśli używasz materialnego interfejsu użytkownika lub czegoś podobnego, gdzie ref={ref} wyrzuca błąd (ponieważ oczekuje innej nazwy właściwości zamiast ref), możesz chcieć

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

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


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

Rozwiązanie 3

Prosty Wejście z wymagany oraz Komunikat o błędzie funkcje, niezbędne zmiany w aktualizacji:

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

Oprócz rejestracji poprawki, jeśli używasz błędów z useForm(), teraz błędy funkcja jest eksportowana z Stan formularza.

Letni

Chodzi o ten problem. Mam nadzieję, że wszystkie rozwiązania bardzo ci pomogły. Skomentuj poniżej Twoje przemyślenia i pytania. Skomentuj również poniżej, które rozwiązanie zadziałało dla Ciebie?

Przeczytaj także