fix(ui): 修复修改弹窗中 FormField 结构被破坏导致的上下文越界报错

This commit is contained in:
kennethcheng 2026-04-29 10:08:05 +08:00
parent a408cad494
commit 2395d792db

View File

@ -47,6 +47,8 @@ interface Asset {
} }
const updateTransactionSchema = z.object({ const updateTransactionSchema = z.object({
assetId: z.string(),
txType: z.string(),
quantity: z.string().regex(/^-?\d+(\.\d+)?$/, '数量必须是数字'), quantity: z.string().regex(/^-?\d+(\.\d+)?$/, '数量必须是数字'),
price: z.string().regex(/^-?\d+(\.\d+)?$/, '价格必须是数字'), price: z.string().regex(/^-?\d+(\.\d+)?$/, '价格必须是数字'),
fee: z.string().regex(/^-?\d+(\.\d+)?$/, '手续费必须是数字').default('0'), fee: z.string().regex(/^-?\d+(\.\d+)?$/, '手续费必须是数字').default('0'),
@ -85,6 +87,8 @@ export function UpdateTransactionDialog({
const form = useForm<UpdateForm>({ const form = useForm<UpdateForm>({
resolver: zodResolver(updateTransactionSchema), resolver: zodResolver(updateTransactionSchema),
defaultValues: { defaultValues: {
assetId: '',
txType: '',
quantity: '', quantity: '',
price: '', price: '',
fee: '0', fee: '0',
@ -96,6 +100,8 @@ export function UpdateTransactionDialog({
useEffect(() => { useEffect(() => {
if (transaction && open) { if (transaction && open) {
form.reset({ form.reset({
assetId: transaction.assetId,
txType: transaction.txType,
quantity: transaction.quantity.toString(), quantity: transaction.quantity.toString(),
price: transaction.price.toString(), price: transaction.price.toString(),
fee: transaction.fee.toString(), fee: transaction.fee.toString(),
@ -138,40 +144,54 @@ export function UpdateTransactionDialog({
<Form {...form}> <Form {...form}>
<form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-4"> <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-4">
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-2 gap-4">
<FormItem> <FormField
<FormLabel></FormLabel> control={form.control}
<Select disabled> name="assetId"
<FormControl> render={({ field }) => (
<SelectTrigger> <FormItem>
<SelectValue placeholder="选择资产" /> <FormLabel></FormLabel>
</SelectTrigger> <Select disabled>
</FormControl> <FormControl>
<SelectContent> <SelectTrigger>
{assets?.map((asset) => ( <SelectValue placeholder="选择资产" />
<SelectItem key={asset.id} value={asset.id}> </SelectTrigger>
{asset.symbol}{asset.name ? ` (${asset.name})` : ''} </FormControl>
</SelectItem> <SelectContent>
))} {assets?.map((asset) => (
</SelectContent> <SelectItem key={asset.id} value={asset.id}>
</Select> {asset.symbol}{asset.name ? ` (${asset.name})` : ''}
</FormItem> </SelectItem>
<FormItem> ))}
<FormLabel></FormLabel> </SelectContent>
<Select disabled> </Select>
<FormControl> <FormMessage />
<SelectTrigger> </FormItem>
<SelectValue placeholder="选择交易类型" /> )}
</SelectTrigger> />
</FormControl> <FormField
<SelectContent> control={form.control}
{Object.entries(txTypeLabels).map(([value, label]) => ( name="txType"
<SelectItem key={value} value={value}> render={({ field }) => (
{label} <FormItem>
</SelectItem> <FormLabel></FormLabel>
))} <Select disabled>
</SelectContent> <FormControl>
</Select> <SelectTrigger>
</FormItem> <SelectValue placeholder="选择交易类型" />
</SelectTrigger>
</FormControl>
<SelectContent>
{Object.entries(txTypeLabels).map(([value, label]) => (
<SelectItem key={value} value={value}>
{label}
</SelectItem>
))}
</SelectContent>
</Select>
<FormMessage />
</FormItem>
)}
/>
</div> </div>
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-2 gap-4">
<FormField <FormField