Xin chào các bạn, các bạn có khỏe không? Hy vọng tất cả các bạn vẫn ổn. Tôi đang gặp lỗi Nhận được lỗi không cần thiết TypeError: path.split không phải là một hàm trong phản ứng. Vì vậy, ở đây tôi giải thích cho bạn tất cả các giải pháp có thể ở đây.

Không lãng phí thời gian của bạn, hãy bắt đầu Bài viết này để giải quyết lỗi này.

Làm thế nào để nhận được Uncaught TypeError: path.split không phải là một hàm trong phản ứng Lỗi này xảy ra?

Tôi có một biểu mẫu xác thực và tôi đang cố gắng thực hiện xác thực cho biểu mẫu của mình trong phản ứng. Tôi chọn react-hook-form. Nhưng tôi liên tục gặp lỗi Path.split is not a function. Ngay cả sau khi sử dụng ví dụ mặc định được cung cấp trong trang web của họ, tôi vẫn gặp lỗi tương tự. Đây là mã mặc định được cung cấp trong trang web chính thức.

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

Và đây là biểu mẫu của tôi

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

Làm thế nào để giải quyết lỗi TypeError: path.split không phải là một hàm trong react?

Câu hỏi: Làm thế nào để giải quyết lỗi loại không hợp lệ: path.split không phải là một hàm trong phản ứng?
Câu trả lời: react-hook-form được cập nhật lên 7.0.0 từ 6.XX và có những thay đổi đột ngột: Bạn phải thay thế tất cả ref = {register} bằng {… register (‘value_name’)}.

Giải pháp 1

react-hook-form được cập nhật lên 7.0.0 từ 6.XX và có những thay đổi đột phá:

Chỉ cần Thay thế dòng bằng mã của bạn ở tất cả các nơi.

ref={register}

đến

{...register('value_name')}

Giải pháp 2

Hãy thử cái này. Đáng nói là nếu bạn đang sử dụng material ui hoặc thứ gì đó tương tự, thì ref = {ref} sẽ xảy ra lỗi (vì nó yêu cầu một tên prop khác thay vì ref), bạn có thể muốn

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

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


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

Giải pháp 3

Giản dị đầu vào với yêu cầuthông báo lỗi các tính năng, thay đổi cần thiết trong bản cập nhật:

Từ phiên bản 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>
  );
}

Đến phiên bản 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>
  );
}

Ngoài đăng ký sửa lỗi, nếu bạn sử dụng lỗi từ useForm (), bây giờ sai sót tính năng được xuất từ formState.

Summery

Đó là tất cả về vấn đề này. Hy vọng tất cả các giải pháp đã giúp bạn rất nhiều. Bình luận bên dưới Suy nghĩ của bạn và thắc mắc của bạn. Ngoài ra, hãy Comment bên dưới giải pháp nào phù hợp với bạn?

Cũng đọc