TS2322 in React UseState 功能： Dispatch<SetStateAction<MyDataType[] | undefined>> 不应未定义

Question

我有一个React组件调用另一个组件，我遇到了一个TypeScript错误，我不知道如何修复。

这就是错误：

TS2322: Type 'Dispatch<SetStateAction<MyDataType[] | undefined>>' is not assignable to type 'Dispatch<SetStateAction<MyDataType[]>>'.

简化代码：

子组件

interface MyProps {
data: MyDataType[],
queueIndex: number,
setQueue: React.Dispatch<React.SetStateAction<MyDataType[]>>,
}
const QueueForm: React.VFC<MyProps> = (
{
data, queueIndex, setQueue,
}: MyProps,
) => {
// Do stuff

父组件

const PageQueueForm: React.VFC<MyProps> = ({
isLoading, setIsLoading, queueIndex, setQueueIndex,
}: MyProps) => {
const [queue, setQueue] = useState<MyDataType[]>();
function useGetQueue() {
return useQuery<MyDataType[], Error>(
`myUrl${groupUuid}`,
async () => fetchWithAuth(getQueueByGroup(groupUuid)),
{
staleTime: DAY_MILLISECONDS,
onSuccess: (data) => {
if (data && data[0]) {
data.map(addStuff);
setQueue(data);
},
},
);
}
const {
data, status, error, isFetching,
} = useGetQueue();
// Must reset state with cached query data if the component is reloaded.
if (status === 'success' && !queue) {
setQueue(data);
}
// Make sure we have at least one item to review.
if (status === 'success' && data && queue) {
return (
<IonPage>
<IonContent>
<QueueForm
data={data}
queueIndex={queueIndex}
// THIS IS WHERE THE ERROR OCCURS.
setQueue={setQueue}
/>
</IonContent>
</IonPage>
);
}

类型.ts

export type MyDataType = AddType & {
myObject: MyObject,
};
type AddType = {
score: number,
id: string,
links: LinkType,
};
type MyObject = {
body: ReactFragment,
id: number,
uuid: string,
image: ResponsiveImageCard | undefined,
};

我尝试检查函数是否存在，如下所示：if (setQueue && status === 'success' && data && queue)。然而，我仍然会遇到同样的错误。

因此，不知何故，我需要重写我的代码，使setQueueSetStateAction始终是MyDataType[]，而不是undefined。我该怎么做？

Answer 1

问题在于如何声明setQueue:

const [queue, setQueue] = useState<MyDataType[]>();

这意味着它的初始值是undefined，因此产生误差。如果你从一个空数组开始，它应该会起作用：

const [queue, setQueue] = useState<MyDataType[]>([]);