在异步数据中使用 useState 时避免非空断言的方法？答案

【问题标题】：Way to avoid non-null assertion while using useState in async Data?在异步数据中使用 useState 时避免非空断言的方法？
【发布时间】：2022-01-08 07:02:20
【问题描述】：

尝试在 Next.js 和 React-query 中使用严格的 typescript

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[];
}

【问题讨论】：

标签： reactjs typescript react-query

【解决方案1】：

你可以的

const [post, setPost] = useState<TitleAndDescription>({
    title: data?.title ?? '',
    content: data?.content ?? []
});

【讨论】：

【解决方案2】：

非空断言适用于您想从类型中排除空值或未定义值的情况。大多数情况下你不需要它，你可以转换成你想要的类型：

(data as Post).title

或提供后备值：

data?.title || ''

【讨论】：

【解决方案3】：

虽然你可以这样做：

const [post, setPost] = useState<TitleAndDescription>({
    title: data?.title ?? '',
    content: data?.content ?? []
});

正如当前接受的答案所暗示的那样，它不会解决您的问题，因为您将始终在本地状态中拥有 undefined，因为当新数据来自 useQuery 时，它不会自动更新。数据将在第一次渲染时未定义，因为 react-query 需要先获取它。使用 useState，您只需传入第一个渲染的初始值 - 这是未定义的。

无需将数据从 react-query 复制到本地状态。这只是重复了单一的事实来源。您可以只使用从 useQuery 返回的数据，因为它将始终反映服务器值：

 const { data } = useQuery<Post>('postEdit', () => getPost(id as string));
const post = data ?? { title: '', content: [] }

【讨论】：