こんにちはみんな、お元気ですか? 皆さんが元気であることを願っています。 エラーに直面しています Uncaught TypeErrorの取得:path.splitはreactの関数ではありません。 だからここで私はあなたにここですべての可能な解決策を説明します。

時間を無駄にすることなく、このエラーを解決するためにこの記事を始めましょう。

キャッチされていないTypeErrorの取得:path.splitはreactの関数ではありませんこのエラーは発生しますか?

検証フォームがあり、reactでフォームの検証を行おうとしています。 私が選んだ react-hook-form。 しかし、私は常にエラーが発生しています Path.split is not a function。 彼らのウェブサイトで与えられたデフォルトの例を使用した後でも、私は同じエラーを受け取ります。 これは公式サイトで提供されているデフォルトのコードです。

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

そしてこれが私の形です

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

キャッチされていないTypeErrorを解決する方法:path.splitはreactの関数ではありませんか?

質問:キャッチされていないTypeErrorを解決する方法:path.splitはreactの関数ではありませんか?
答え: react-hook-formが6.XXから7.0.0に更新され、重大な変更があります。すべてのref = {register}を{…register(’value_name’)}に置き換える必要があります。

解決策1

react-hook-formが6.XXから7.0.0に更新され、重大な変更が加えられました。

すべての場所で行をコードに置き換えるだけです。

ref={register}

{...register('value_name')}

解決策2

これを試してみてください。 マテリアルUIまたは同様のものを使用している場合、ref = {ref}がエラーをスローすることは言及する価値があります(代わりに別のプロップ名を予期しているため) ref)、 あなたはしたいかもしれない

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

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


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

解決策3

単純 入力必要エラーメッセージ 機能、アップデートに必要な変更:

バージョン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>
  );
}

バージョン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>
  );
}

レジスタの修正に加えて、useForm()からのエラーを使用する場合は、 エラー 機能はからエクスポートされます formState

夏らしい

それはすべてこの問題についてです。 すべての解決策があなたに大いに役立つことを願っています。 あなたの考えとあなたの質問の下にコメントしてください。 また、どのソリューションがあなたのために働いたかを以下にコメントしますか?

また読む