我想讓我的定制鉤子盡可能重復使用。
我想將泛型類型(因為對于不同的表單,我將有不同的錯誤字段)傳遞給我的const errors: Y = {};
,它現在是空的,但可以作為帶有驗證錯誤的對象返回。
在第4行const errors: Y = {};
中,我收到了一個錯誤:
類型“{}”不可分配給類型“Y”Y'可以用與'{}'.ts(2322無關的任意類型實例化)
validate.ts:
export default function validate<T extends Record<string, string>, Y>(
values: T
): Y {
const errors: Y = {};
if (!values.title) {
errors.title = "Title is required";
}
return errors;
}
我使用validate
方法的地方:
setErrors(validate<T, Y>(state));
function useFormState<T extends Record<string, string>, Y>(
initialValue: T,
initialErrors: Y
) {
const [state, dispatch] = useReducer(
(prevState: T, { name, value }: InputChangeEvent["target"]) => ({
...prevState,
[name]: value
}),
initialValue
);
const [errors, setErrors] = useState<Y>(initialErrors);
const handleSubmit = (evt: FormEvent) => {
evt.preventDefault();
setErrors(validate<T, Y>(state));
};
return [state, errors, handleSubmit] as const;
}
export default useFormState;
我試圖將不同的類型傳遞給這個方法const errors: ErrorValues = {};
,但我有兩個不同的問題:
- 我的方法是不可重用的,因為我不能以不同的形式使用它。
- 當我想打電話給
setErrors(validate(state));
時,我收到了另一個錯誤:
“ErrorValues”類型的參數不能分配給“SetStateAction”類型的參數。類型“ErrorValues”不可分配給類型“(prevState:Y)=>Y”。類型“ErrorValues”不提供與簽名匹配的內容(prevState:Y):Y'.ts(2345
也許你可以試試這個?在你的沙箱中暫時跳過這個代碼,看起來還可以