Question

我使用打字稿制作了以下通用自定义钩子：

import { useState } from "react"

export const useForm = <T>(initialValues: T) => {
    const[values, setValues] = useState<T>(initialValues)
    return [
        values,
        (        
        e: { target: HTMLInputElement}) => {
            setValues({
                ...values,
                [e.target.name]: e.target.value
            })
        }
    ]
}

然后我要使用它：

import React from 'react';
import { useForm } from './useForm';

type FormValues = {
  email: string,
  password: string
}

const App : React.FC = () => {
  const initialValues: FormValues = {email: "", password: ""}
  const [values, handleChanges] = useForm<FormValues>(initialValues);

  return (
    <div>
      <input type="text" name="email" value={(values.email} onChange={e => handleChanges}/>
      <input 
        type="password"
        name="password"
        value={values.password}
        onChange={e => handleChanges}/>
    </div>
  )
}

我的问题出在

values.email

和

values.password

错误消息是：

类型'FormValues |中不存在属性'email' （（e：{target：HTMLInputElement;}）=> void）'。属性'email'在类型'（e：{target：HTMLInputElement;}）中不存在

类型“ FormValues |属性”上不存在属性“密码” （（e：{target：HTMLInputElement;}）=> void）'。类型'（e：{target：HTMLInputElement;}）不存在属性'password'

如果值是FormValues和另一个值之间的统一体，我是否应该不能从中访问电子邮件和密码？

Answer 1

问题是我的退货类型。看来我必须明确地将其放在代码签名上。

import { useState } from "react"
import { ChangeEvent } from "react"

function useForm<T>(
    initialState: T,
  ): [T, (e: ChangeEvent<HTMLInputElement>) => void] {
    const [values, setValues] = useState<T>(initialState);

    function handleChange(e: ChangeEvent<HTMLInputElement>): void {
      setValues({
        ...values,
        [e.target.name]: e.target.value,
      });
    }

    return [values, handleChange];
  }

  export default useForm;

返回类型不正确，带有来自useState的自定义钩子

1 个答案: