TS2322：类型"(数据：票证完整DTO)=>承诺<void>"不可分配给类型"表单事件处理程序<HTMLFormElement>"

Question

我试图创建一个编辑表单来编辑数据库的id数据。我尝试这样做:

import React, {FormEvent, useEffect, useState} from "react";
import TextField from "@material-ui/core/TextField";
import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";
import {
TicketFullDTO,
TicketStatusTypesDTO,
} from "../../service/support/types";
import {
getTicket,
getTicketStatusTypes,
updateTicket,
} from "../../service/support";
import { useHistory, useParams } from "react-router-dom";
import InputLabel from "@mui/material/InputLabel";
import Select from "@mui/material/Select";
import MenuItem from "@mui/material/MenuItem";
import { FormControl } from "@mui/material";
import { Moment } from "moment";
import { RouteParams } from "../../service/utils";

export default function TicketProfile(props: any) {
const classes = useStyles();
let history = useHistory();
let requestParams = useParams<RouteParams>();
const [status, setStatus] = useState<string>("");
const [submitDate, setSubmitDate] = useState<Moment | null>(null);

// This won't be run unless all the input validations are met.
const onSubmit = async (data: TicketFullDTO) => {
console.log(data);
updateTicket(requestParams.id, data)
.then(({ data }) => {
console.log(data.title);
history.replace("/support");
})
.catch((err) => {
console.log(err);
});
};

const [ticketCategoriesList, setTicketCategoriesList] = useState<
TicketCategoryTypesDTO[]
>([]);
const [ticket, setTicket] = useState<TicketFullDTO>();

useEffect(() => {
getSingleTicket();
}, []);

const getSingleTicket = async () => {
getTicket(requestParams.id)
.then(({ data }) => {
setTicket(data);
})
.catch((error) => {
console.error(error);
});
};

const [ticketStatusList, setTicketStatusList] = useState<
TicketStatusTypesDTO[]
>([]);

useEffect(() => {
ticketStatusData();
}, []);

const ticketStatusData = async () => {
getTicketStatusTypes()
.then((resp) => {
setTicketStatusList(resp.data);
})
.catch((error) => {
console.error(error);
});
};

return (
<Container>
<form onSubmit={onSubmit}>
.........
<TextField
value={ticket?.title}
id="title"                                             
onChange={({ target: { value } }) => {
setTicket({ ...ticket, title: value });
}}
/>
.........
<FormControl>
<TextField
label="Submit Date"
id="submit-date"
type="date"
defaultValue={ticket?.submitDate}                             
//@ts-ignore
onInput={(e) => setSubmitDate(e.target.value)}
/>
</FormControl>

..........
<Select
labelId="status-label"
id="status-helper"
value={ticket?.status}
onChange={(e) => setStatus(e.target.value)}
required
>
{ticketStatusList.map((element) => (
<MenuItem value={element.code}>
{element.name}
</MenuItem>
))}
</Select>
</FormControl>
...........

<Button
type="submit"
>
Update Ticket
</Button>                       

</Container>
);
}

.....

export async function updateTicket(
id: string,
data: TicketFullDTO
): Promise<AxiosResponse<TicketFullDTO>> {
return await axios.post<TicketFullDTO>(
`${baseUrl}/management/support/tickets/ticket/${id}`,
{
data,
}
);
}
export interface TicketFullDTO {
id?: number,
title?: string,
status?: string,
submitDate?: Moment | null
}

I在这行:<form onSubmit={onSubmit}>我得到这个错误:

TS2322: Type '(data: TicketFullDTO) => Promise<void>' is not assignable to type 'FormEventHandler<HTMLFormElement>'.   Types of parameters 'data' and 'event' are incompatible.     Type 'FormEvent<HTMLFormElement>' has no properties in common with type 'TicketFullDTO'.  index.d.ts(1390, 9): The expected type comes from property 'onSubmit' which is declared here on type 'DetailedHTMLProps<FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>'

你知道我怎么解决这个问题吗?

Answer 1

看起来你想使用的是ticket状态变量作为你的data，因为你所有的字段都在更新状态变量，这将是这样做的:

const onSubmit = async () => {
updateTicket(requestParams.id, ticket)
.then(({ data }) => {
console.log(data.title);
history.replace("/support");
})
.catch((err) => {
console.log(err);
});
};

类型验证失败的原因是因为onSubmit事件处理程序将事件作为参数，所以如果您确实想使用该参数，您将执行以下操作(其中e将是事件对象):

const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
...