Hallo jongens, hoe gaat het met jullie allemaal? Ik hoop dat jullie allemaal in orde zijn. Ik heb te maken met een fout Uncaught TypeError: path.split is geen functie in react. Dus hier ben ik Leg hier alle mogelijke oplossingen uit.

Laten we, zonder uw tijd te verspillen, dit artikel beginnen om deze fout op te lossen.

Hoe Uncaught TypeError: path.split is geen functie in reageren Deze fout treedt op?

Ik heb een validatieformulier en ik probeer validaties te doen voor mijn formulier in reactie. ik kies react-hook-form. Maar ik krijg constant een foutmelding Path.split is not a function. Zelfs na het gebruik van het standaardvoorbeeld op hun website, krijg ik dezelfde foutmelding. Dit is de standaardcode die op de officiële site wordt gegeven.

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

En dit is mijn formulier

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

Hoe Uncaught TypeError op te lossen: path.split is geen functie in react?

Vraag: Hoe Uncaught TypeError op te lossen: path.split is geen functie in react?
Antwoorden: react-hook-form geüpdatet naar 7.0.0 vanaf 6.XX en heeft belangrijke wijzigingen: je moet alle ref={register} vervangen door {…register(‘value_name’)}.

Oplossing 1

react-hook-form geüpdatet naar 7.0.0 van 6.XX en heeft belangrijke wijzigingen:

Vervang de regel gewoon op alle plaatsen door uw code.

ref={register}

tot

{...register('value_name')}

Oplossing 2

Probeer dit uit. Vermeldenswaard is dat als u materiaal ui of iets dergelijks gebruikt, waarbij ref={ref} een fout genereert (omdat het een andere propnaam verwacht in plaats van ref), wilt u misschien

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

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


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

Oplossing 3

Gemakkelijk invoer met verplicht en foutmelding functies, noodzakelijke wijzigingen in de update:

Vanaf versie 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>
  );
}

Naar versie 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>
  );
}

Naast het registreren van de fix, als u nu fouten van useForm() gebruikt, fouten functie is geëxporteerd uit formulierStatus.

Zomers

Het draait allemaal om deze kwestie. Ik hoop dat alle oplossingen je veel hebben geholpen. Reageer hieronder Uw gedachten en uw vragen. Reageer hieronder ook welke oplossing voor u werkte?

Lees ook: