嘗試在 Next.js 和 React-query 中使用嚴格的打字稿
useQuery 的回傳資料是 Post | 存在問題 不明確的。所以我應該用 useQuery 給出的資料不為空！分配給 useState 時的運算子
ESlint 不喜歡非空型別斷言。我知道我可以把它關掉……但我想做嚴格的型別檢查，所以我不想避免這種情況。
我發現的一種方法是使用 if 陳述句進行空檢查，但 React Hooks 無法用 if 陳述句包裝它......
有什么絕妙的方法嗎？
我的代碼是這樣的
const Edit = () => {
const router = useRouter();
const { id } = router.query;
const { data } = useQuery<Post>('postEdit', () => getPost(id as string));
const [post, setPost] = useState<TitleAndDescription>({
title: data!.title,
content: data!.content,
});
const editMutation = usePostEditMutation();
return (
<MainLayout>
<Wrapper>
{data && <Editor post={post} setPost={setPost} />}
</Wrapper>
</MainLayout>
);
};
export interface TitleAndDescription {
title: string;
content: Descendant[];
}
uj5u.com熱心網友回復：
你可以做
const [post, setPost] = useState<TitleAndDescription>({
title: data?.title ?? '',
content: data?.content ?? []
});
uj5u.com熱心網友回復：
非空斷言適用于您希望從型別中排除空值或未定義值的情況。大多數情況下你不需要它，你可以轉換成你想要的型別：
(data as Post).title
或提供后備值：
data?.title || ''
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/405717.html
標籤：
上一篇：反應：無法訪問div元素的值