大家好，你們好嗎？ 希望你們都很好。 我面臨一個錯誤 獲取未捕獲的類型錯誤：path.split 不是反應中的函數. 所以我在這裡向您解釋所有可能的解決方案。

不要浪費你的時間，讓我們開始這篇文章來解決這個錯誤。

如何獲取未捕獲的 TypeError: path.split is not a function in react This Error Occurs ？

我有一個驗證表單並且我正在嘗試對我的表單進行驗證以做出反應。 我選擇了 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 is not a function in react ？

問題：如何解決 Uncaught TypeError: path.split is not a function in 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() 中的錯誤，現在 錯誤 特徵是從 表單狀態.

夏天的

都是關於這個問題的。 希望所有解決方案對您有很大幫助。 在下面評論您的想法和疑問。 另外，請在下面評論哪種解決方案對您有用？

另請閱讀