Hei folkens, hvordan har dere det? Håper dere alle har det bra. Jeg står overfor en feil Få Uncaught TypeError: path.split er ikke en funksjon i react. Så her er jeg Forklar deg alle mulige løsninger her.

Uten å kaste bort tiden din, la oss starte denne artikkelen for å løse denne feilen.

Hvordan få uncaught TypeError: path.split er ikke en funksjon i react Denne feilen oppstår?

Jeg har et valideringsskjema og jeg prøver å gjøre valideringer for skjemaet mitt i reaksjon. jeg velger react-hook-form. Men jeg får stadig feil Path.split is not a function. Selv etter å ha brukt standardeksemplet gitt på nettstedet deres, får jeg den samme feilen. Dette er standardkoden gitt på det offisielle nettstedet.

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

Og dette er min 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>

Hvordan løser jeg ufanget typefeil: path.split er ikke en funksjon i react?

Spørsmål: Hvordan løser jeg ufanget TypeError: path.split er ikke en funksjon i react ?
Svar: react-hook-form oppdatert til 7.0.0 fra 6.XX og har brytende endringer: Du må erstatte alle ref={register} med {…register(‘value_name’)}.

Løsning 1

react-hook-form oppdatert til 7.0.0 fra 6.XX og har brytende endringer:

Bare erstatt linjen med koden din på alle steder.

ref={register}

til

{...register('value_name')}

Løsning 2

Prøv denne. Verdt å nevne at hvis du bruker material ui eller noe lignende, hvor ref={ref} kaster en feil (fordi den forventer et annet propnavn i stedet for ref), du vil kanskje

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

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


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

Løsning 3

Enkel input med nødvendig og feilmelding funksjoner, nødvendige endringer i oppdatering:

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

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

I tillegg til å registrere fix, hvis du bruker feil fra useForm(), nå feil funksjonen eksporteres fra formState.

Sommerlig

Det handler om dette problemet. Håper alle løsninger hjalp deg mye. Kommenter under Dine tanker og spørsmål. Kommenter også under hvilken løsning som fungerte for deg?

Les også