使用 Typescript 反應自定義 Hook （（{目標}：任何）=>無效）'.ts（2339）”

Question

我正在嘗試使用自定義鈎子管理表單，所以我有這個代碼

FormHook.tsx：

import { useState } from 'react';

interface ICampos  {
    name: string;
    email: string;
    password: string;
}


const useForm = (initialState: ICampos) => {
    
    const [values, setValues] = useState(initialState);


    const handleInputChange = ({ target }: any) => {
        setValues({
            ...values,
            [target.name]: target.value
        })
    };

    return [values, handleInputChange];
}

export default useForm

FormWithCustomHook.tsx：

import React from 'react'
import './effects.css' 
import useForm from '../../hooks/useForm';

interface ICampos  {
    name: string;
    email: string;
    password: string;
}

const FormWithCustomHook = () => {

    const [formValues, handleInputChange] = useForm({
        name: '',
        email: '',
        password: ''
    });

    const { name, email, password } = formValues;



    return (
        <>
            <h1> FormWithCustomHook </h1>
            <hr />

            <div className="form-group">
                <input
                    type="text"
                    name="name"
                    className="form-control"
                    placeholder="Tu nombre"
                    autoComplete="off"
                    value={name}
                    onChange={handleInputChange} />
            </div>
            
            <div className="form-group">

                <input
                    type="email"
                    name="email"
                    className="form-control"
                    placeholder="email@ejemplo.com"
                    autoComplete="off"
                    value={email}
                    onChange={handleInputChange} />
            </div>

            <div className="form-group">

                <input
                    type="password"
                    name="password"
                    className="form-control"
                    placeholder="*****"
                    autoComplete="off"
                    value={password}
                    onChange={handleInputChange} />
            </div>

        </>
    )
}

export default FormWithCustomHook;

我在 FormWithCustomHook.tsx 上遇到了這個錯誤：

const { name, email, password } = formValues;

它僅在 email 和密碼上標記錯誤：

'ICampos | 類型上不存在'屬性'電子郵件' （（{目標}：任何）=>無效）'.ts（2339）'

在我的 onChange 里面的輸入中說：

輸入'ICampos | (({ target }: any) => void)' 不能分配給類型 '((event: ChangeEvent) => void) | 不明確的'。 類型“ICampos”不可分配給類型“（事件：ChangeEvent）=> void”。 類型“ICampos”不匹配簽名“（事件：ChangeEvent）：void”.ts（2322）index.d.ts（2092，9）：預期類型來自屬性“onChange”，該屬性在此處聲明'DetailedHTMLProps<InputHTMLAttributes, HTMLInputElement>''

我試圖在 customhook.tsx 上添加類型，但我真的不明白這個錯誤

Answer 1

鈎子不知道數組的順序。 所以它可能是ICampos | Handler ICampos | Handler或Handler | ICampos Handler | ICampos 。 您在這里有兩個選擇：

您可以在掛鈎上鍵入返回數組：

const useForm = (
  initialState: ICampos
): [ICampos, ({ target }: any) => void] => {
  const [values, setValues] = useState<ICampos>(initialState);

  const handleInputChange = ({ target }: any) => {
    setValues({
      ...values,
      [target.name]: target.value
    });
  };

  return [values, handleInputChange];
};

或者您可以返回 object 而不是數組。 我更喜歡這個，因為我不喜歡輸入 arrays。

import { useState } from "react";

interface ICampos {
  name: string;
  email: string;
  password: string;
}

const useForm = (initialState: ICampos) => {
  const [values, setValues] = useState<ICampos>(initialState);

  const handleInputChange = ({ target }: any) => {
    setValues({
      ...values,
      [target.name]: target.value
    });
  };

  return { values, handleInputChange };
};

export default useForm;

import React from "react";
import "./effects.css";
import useForm from "./useForm";

interface ICampos {
  name: string;
  email: string;
  password: string;
}

const FormWithCustomHook = () => {
  const { values, handleInputChange } = useForm({
    name: "",
    email: "",
    password: ""
  });

  const { name, email, password } = values;

  return (
    <>
      <h1> FormWithCustomHook </h1>
      <hr />

      <div className="form-group">
        <input
          type="text"
          name="name"
          className="form-control"
          placeholder="Tu nombre"
          autoComplete="off"
          value={name}
          onChange={handleInputChange}
        />
      </div>

      <div className="form-group">
        <input
          type="email"
          name="email"
          className="form-control"
          placeholder="email@ejemplo.com"
          autoComplete="off"
          value={email}
          onChange={handleInputChange}
        />
      </div>

      <div className="form-group">
        <input
          type="password"
          name="password"
          className="form-control"
          placeholder="*****"
          autoComplete="off"
          value={password}
          onChange={handleInputChange}
        />
      </div>
    </>
  );
};

export default FormWithCustomHook;