我有這個代碼如何動態輸入 onHandlerData 函式的資料引數？
export interface UserFormDto {
credentials: UserCredentialsDto | null;
details: UserDetailsDto | null;
address: UserAddressDto | null;
}
const [data, setData] = useState<UserFormDto>({
credentials: null,
details: null,
address: null,
});
const onHandlerData = (
type: keyof UserFormDto,
data: UserFormDto["credentials"]
) => {
setData((data) => {
return { ...data, [type]: data };
});
};
uj5u.com熱心網友回復：
首先，onHandlerData( 不僅僅是它的型別)的實作存在問題，你正在data用回呼中的data引數遮蔽引數setData。你需要一個不同的名字。
一旦你有了它，你就可以使用泛型型別引數來處理確保type和data協同作業，如下所示：
const onHandlerData = <KeyType extends keyof UserFormDto,>(
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
type: KeyType,
// ^^^^^^^
data: UserFormDto[KeyType]
// ^^^^^^^^^^^^^^^^^^^^
) => {
setData((current) => {
return { ...current, [type]: data };
});
};
游樂場鏈接
（,在泛型型別引數定義之后，它可以與 JSX 一起使用。它告訴決議器那個<...>東西不是元素定義。）
uj5u.com熱心網友回復：
我能想到的實作它的一種方法是使用泛型，如下所示：
const onHandlerData = <T extends keyof UserFormDTo>(
type: T,
data: UserFormDto[T]
) => {
setData((oldData) => {
return { ...oldData, [type]: data };
});
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/326533.html