여러분 안녕하십니까? 당신이 모두 괜찮기를 바랍니다. 오류가 발생했습니다 잡히지 않은 TypeError 가져오기: path.split은 반응의 함수가 아닙니다.. 그래서 여기에서 가능한 모든 솔루션을 여기에서 설명합니다.

시간을 낭비하지 않고 이 문서를 시작하여 이 오류를 해결해 보겠습니다.

잡히지 않는 TypeError 얻기: path.split이 반응하는 함수가 아닙니다. 이 오류가 발생합니까?

유효성 검사 양식이 있습니다. 그리고 반응에서 양식에 대한 유효성 검사를 수행하려고 합니다. 나는 선택했다 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은 반응의 함수가 아닙니다?

질문: 잡히지 않은 TypeError를 해결하는 방법: path.split은 반응의 함수가 아닙니다.
대답: 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()에서 오류를 사용하는 경우 이제 오류 기능을 다음에서 내보냅니다. 양식 상태.

여름

이 문제에 대한 모든 것입니다. 모든 솔루션이 많은 도움이 되었기를 바랍니다. 아래에 귀하의 생각과 질문을 댓글로 남겨주세요. 또한 어떤 솔루션이 귀하에게 효과가 있었는지 아래에 댓글로 남겨주세요.

또한 읽기