Reactjs 使用useState中的自定义挂钩返回类型不正确

我使用typescript制作了以下通用自定义挂钩：

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
            })
        }
    ]
}

及

错误消息是：

类型“FormValues |”（（e:{target:HTMLInputElement；}）=>void）上不存在属性“email”。 类型（e:{target:HTMLInputElement；}）上不存在属性“email”

类型“FormValues |”（（e:{target:HTMLInputElement；}）=>void）上不存在属性“password”。 类型（e:{target:HTMLInputElement；}）上不存在属性“password”

---

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

问题在于我的返回类型。似乎我必须明确地把它写在代码签名上

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;

从“react”导入{useState}
从“react”导入{ChangeEvent}
函数使用形式(
初始状态：T，
)：[T，（e:ChangeEvent）=>void]{
const[values，setValues]=useState（initialState）；
函数handleChange（e:ChangeEvent）：无效{
设定值({
价值观
[e.target.name]：e.target.value，
});
}
返回[值，handleChange]；
}
导出默认useForm；

您的代码具有

onChange={e=>handleChanges}

。那是个打字错误，对吗？你是说

onChange={handleChanges}

？是的@azium，我在这里做了一些更改，现在我在handleChanges上遇到了类似的问题。类型“FormValues”|（（e:ChangeEvent）=>void）不可分配给类型“（（事件：ChangeEvent）=>void）|未定义”。这家伙有一个类似的问题，但它没有解决那里

values.email

values.password

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;