React 自定义钩子与打字稿类型错误"属性'x'在类型'接口 |(({ target }: any) =&g

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="[e-mail]"
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;

它仅在电子邮件和密码上标记错误：

"属性'电子邮件'在类型"ICampos |(({ target }： any( => void('.ts(2339('

在我的输入内部更改中说：

类型 'ICampos |(({ 目标 }： 任意( => void(' 不能分配给类型 '((event： ChangeEvent( => void( |未定义'。 类型"ICampos"不能分配给类型"(事件：更改事件(=>无效"。 类型 'ICampos' 与签名 '(event： ChangeEvent(： void' 不匹配。ts(2322( index.d.ts(2092， 9(：预期的类型来自属性"onChange"，该属性在类型"DetailedHTMLProps<InputHTMLAttributes，>"上声明

我尝试在customhook.tsx上添加类型，但我真的不明白这个错误

Answer 1

钩子不知道数组的顺序。所以它可能是ICampos | Handler或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];
};

或者，您可以返回一个对象而不是数组。我更喜欢这个，因为我不喜欢键入数组。

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="[e-mail]"
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;