来自 useState 的自定义钩子的返回类型不正确答案

【问题标题】：Improper return type with custom hook from useState来自 useState 的自定义钩子的返回类型不正确
【发布时间】：2020-04-22 18:20:08
【问题描述】：

我有以下用 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
            })
        }
    ]
}

那我试试用：

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)'。类型 '(e: { target: HTMLInputElement; }) 上不存在属性 'email'

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

如果 values 是 FormValues 和另一个值之间的并集，我不应该能够从中访问 email 和 password 吗？

【问题讨论】：

你的代码有 onChange={e => handleChanges} 。这是一个错字吧？你的意思是onChange={handleChanges}？
是的@azium，我在这里做了一些更改，现在我遇到了与 handleChanges 类似的问题。输入'FormValues | ((e: ChangeEvent) => void)' 不能分配给类型 '((event: ChangeEvent) => void) |未定义'。
stackoverflow.com/questions/58140242/… 这个人也有类似的问题，但没有解决

标签： reactjs typescript react-hooks

【解决方案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;

【讨论】：