Sziasztok srácok, hogy vagytok? Remélem mindannyian jól vagytok. Hibával állok szemben Getting Uncaught TypeError: A path.split nem a react függvény. Tehát itt vagyok, és elmagyarázom Önnek az összes lehetséges megoldást.

Anélkül, hogy pazarolja az idejét, kezdje el ezt a cikket a hiba megoldásához.

Hogyan Getting Uncaught TypeError: path.split nem egy függvény reagál Ez a hiba lép fel?

Van egy érvényesítési űrlapom, és megpróbálom ellenőrizni az űrlapomat a react-ban. én választok react-hook-form. De folyamatosan kapok hibát Path.split is not a function. Még a webhelyükön megadott alapértelmezett példa használata után is ugyanazt a hibát kapom. Ez a hivatalos webhelyen megadott alapértelmezett kód.

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

És ez az én formám

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

Hogyan lehet megoldani a nem elkapott típushibát: a path.split nem egy függvény a react-ban?

Kérdés: Hogyan lehet megoldani a nem elkapott típushibát: a path.split nem a react függvény?
Válasz: A react-hook-form 7.0.0-ra frissítve a 6.XX-ről, és törést okoz: Az összes ref={register} elemet le kell cserélnie a következőre: {…register(‘value_name’)}.

1. megoldás

A react-hook-form 7.0.0-ra frissítve a 6.XX-ről, és törést okoz:

Csak cserélje ki a sort a kódjával minden helyen.

ref={register}

nak nek

{...register('value_name')}

2. megoldás

Próbáld ki ezt. Érdemes megemlíteni, hogy ha anyagi felhasználói felületet vagy hasonlót használsz, ahol a ref={ref} hibát dob ​​(mert más kelléknévre számít ref), esetleg szeretné

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

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


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

3. megoldás

Egyszerű bemenet val vel kívánt és hiba üzenet funkciók, szükséges változtatások a frissítésben:

A 6.xx verziótól

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

A 7.xx verzióhoz

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

A regisztrációjavítás mellett, ha a useForm() hibáit használja, most hibákat a szolgáltatás exportálása innen formState.

Nyárias

Minden erről a kérdésről szól. Remélem, minden megoldás sokat segített. Írja meg kommentben gondolatait és kérdéseit. Továbbá írja meg kommentben, hogy melyik megoldás vált be Önnek?

Olvassa el is