Hei kaverit, mitä kuuluu? Toivottavasti olette kaikki kunnossa. Olen virheen edessä Getting Uncaught TypeError: path.split ei ole react-funktio. Joten tässä olen Selitän sinulle kaikki mahdolliset ratkaisut täällä.

Haaskaamatta aikaasi, aloitetaan tämä artikkeli tämän virheen ratkaisemiseksi.

Kuinka Getting Uncaught TypeError: path.split ei ole toiminto, joka reagoi tähän virheeseen?

Minulla on vahvistuslomake ja yritän tehdä validointeja lomakkeelleni reactissa. minä valitsin react-hook-form. Mutta saan jatkuvasti virheitä Path.split is not a function. Jopa heidän verkkosivuillaan annetun oletusesimerkin käytön jälkeen saan saman virheen. Tämä on virallisella sivustolla annettu oletuskoodi.

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

Ja tämä on minun muotoni

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

Kuinka ratkaista uncaught TypeError: path.split ei ole funktio reactissa?

Kysymys: Kuinka ratkaista uncaught TypeError: path.split ei ole funktio reactissa?
Vastaus: react-hook-form päivitetty versioon 7.0.0 versiosta 6.XX ja siinä on rikkovia muutoksia: Sinun on korvattava kaikki ref={register} merkillä {…register(’value_name’)}.

Ratkaisu 1

react-hook-form päivitetty versioon 7.0.0 versiosta 6.XX ja siinä on rikkovia muutoksia:

Korvaa vain rivi koodillasi kaikissa paikoissa.

ref={register}

kohtaan

{...register('value_name')}

Ratkaisu 2

Kokeile tätä. Mainitsemisen arvoinen, että jos käytät materiaalia käyttöliittymää tai jotain vastaavaa, jossa ref={ref} antaa virheen (koska se odottaa eri prop-nimen sijaan ref), saattaisit haluta

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

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


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

Ratkaisu 3

Yksinkertainen syöttö kanssa vaaditaan ja virheviesti ominaisuudet, tarvittavat muutokset päivitykseen:

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

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

Rekisteröinnin lisäksi, jos käytät useForm()-virheitä, nyt virheitä ominaisuus viedään formState.

Kesäinen

Kaikki on tästä aiheesta. Toivottavasti kaikki ratkaisut auttoivat sinua paljon. Kommentoi alle ajatuksesi ja kysymyksesi. Kommentoi myös alle mikä ratkaisu toimi sinulle?

Lue myös