สวัสดีทุกคนสบายดีไหม หวังว่าทุกคนสบายดี ฉันกำลังเผชิญกับข้อผิดพลาด รับ Uncaught TypeError: path.split ไม่ใช่ฟังก์ชันใน react. ดังนั้นฉันอธิบายให้คุณทราบถึงวิธีแก้ปัญหาที่เป็นไปได้ทั้งหมดที่นี่

โดยไม่เสียเวลา มาเริ่มบทความนี้เพื่อแก้ไขข้อผิดพลาดนี้กัน

การรับ Uncaught 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>

วิธีแก้ปัญหา Uncaught TypeError: path.split ไม่ใช่ฟังก์ชันใน react ?

คำถาม: วิธีแก้ปัญหา Uncaught TypeError: path.split ไม่ใช่ฟังก์ชันใน react ?
ตอบ: react-hook-form อัปเดตเป็น 7.0.0 จาก 6.XX และมีการเปลี่ยนแปลงที่แตกหัก: คุณต้องแทนที่ ref={register} ทั้งหมดด้วย {…register(‘value_name’)}

โซลูชัน 1

react-hook-form อัปเดตเป็น 7.0.0 จาก 6.XX และมีการเปลี่ยนแปลงที่แตกหัก:

เพียงแทนที่บรรทัดด้วยรหัสของคุณทุกที่

ref={register}

ถึง

{...register('value_name')}

โซลูชัน 2

ลองนี้. ควรค่าแก่การกล่าวขวัญว่าหากคุณใช้วัสดุ ui หรือสิ่งที่คล้ายกัน โดยที่ ref={ref} เกิดข้อผิดพลาด (เพราะคาดว่าจะใช้ชื่อ prop อื่นแทน 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() ตอนนี้ ข้อผิดพลาด คุณลักษณะถูกส่งออกจาก แบบฟอร์มState.

Summery

มันคือทั้งหมดที่เกี่ยวกับปัญหานี้ หวังว่าวิธีแก้ปัญหาทั้งหมดจะช่วยคุณได้มาก แสดงความคิดเห็นด้านล่างความคิดและข้อสงสัยของคุณ แสดงความคิดเห็นด้านล่างว่าโซลูชันใดที่เหมาะกับคุณ

อ่านยัง