在TypeScript中键入PrevState

Question

我正在使用上下文为对话框存储对象。我有一个函数，它根据prevState更新存储在上下文中的数组。然而，TypeScript不喜欢我的prevState类型。

类型为"的参数(prevState:SourceOrganizationAccount[](=>SourceOrganizationAccount[]"不可分配给类型为"SourceOrganizationAccount[]"的参数。类型'(prevState:SourceOrganizationAccount[](=>SourceOrganizationAccount[]"在类型"SourceOrganizationAccount[]"中缺少以下属性：pop、push、concat、join和其他27个属性。

这是我的函数为handleCheckAccountDetailsClick的组件。它在sourceOrganizationAccounts.setValue((prevState: SourceOrganizationAccount[]) => {上抱怨。prevState有什么问题？

import React from 'react';
import { getAccount } from 'utils';
import {
SourceOrganizationAccount,
useImportAccountsContext,
} from '../ImportAccountsContext';
export function ImportAccountsTable() {
const { sourceOrganizationAccounts } = useImportAccountsContext();
async function handleCheckAccountDetailsClick(account: SourceOrganizationAccount) {
const accountDetailsRes = await getAccount();
if (accountDetailsRes.success) {
sourceOrganizationAccounts.setValue((prevState: SourceOrganizationAccount[]) => {
const updatedArray = prevState.map(sourceOrganizationAccount => {
return sourceOrganizationAccount.locator === account.locator
? {
...sourceOrganizationAccount,
...accountDetailsRes.accountDetails,
}
: sourceOrganizationAccount;
});
return updatedArray;
});
}
}
return <>Test</>;
}

我的类型

export type SourceOrganizationAccount = {
name: string;
createdOn: number;
locator: string;
}
export interface StateVariable<T> {
value: T;
setValue: (value: T) => void;
}
export interface ImportAccountsState {
sourceOrganizationAccounts: StateVariable<SourceOrganizationAccount[]>;
}
const ImportAccountsContext = createContext<ImportAccountsState>(
{} as ImportAccountsState,
);
export const ImportAccountsProvider = ({ children }: props) => {
const [sourceOrganizationAccounts, setSourceOrganizationAccounts] = useState<
SourceOrganizationAccount[]
>([]);
const resetContext = useCallback(() => {
setSourceOrganizationAccounts([]);
}, [
setSourceOrganizationAccounts,
]);
const initialState: ImportAccountsState = {
sourceOrganizationAccounts: {
value: sourceOrganizationAccounts,
setValue: setSourceOrganizationAccounts,
}
};
return (
<ImportAccountsContext.Provider value={initialState}>
{children}
</ImportAccountsContext.Provider>
);
};
export const useImportAccountsContext = () => {
return useContext<ImportAccountsState>(ImportAccountsContext);
};

Answer 1

如果您彻底检查您的StateVariable<T>类型，您可能会注意到该类型的setValue字段具有签名：

setValue: (value: T) => void

当您尝试为其提供T类型的值时，请使用(prevState: T) => T类型的值(函数(。

为了匹配您的功能实现，类型StateVariable应定义为：

interface StateVariable<T> {
value: T;
setValue: (cb: (value: T) => T) => void;
}

React公开了用于键入useState调度函数的特殊助手类型：Dispatch<SetStateAction<T>>，因此您也可以将其写成：

import { Dispatch, SetStateAction } from 'react'
interface StateVariable<T> {
value: T
setValue: Dispatch<SetStateAction<T>>
}