组件未呈现时，Typescript null检查自定义挂钩返回数据

Question

我们正在提取数据并使用Redux工具包进行消费。然后，我们根据数据的可用性有条件地渲染组件。但是，如果我使用自定义RTK挂钩访问组件中的数据，而该组件在没有该数据的情况下不会渲染，Typescript仍然会抱怨数据可能为空。

父

<Route path={"/cards"}>
{person && <Cards />}
</Route>

组件

import { usePerson } from "store/hooks/person"
export const Cards = (): JSX.Element => {
const { person } = usePerson()
const { randomData } = useCards({person}) // person is possibly null here

我们不希望在所有内容中都包含空检查。理想情况下，我们应该能够使用RTK挂钩来消耗数据，而不是通过组件道具。或者这是一个糟糕的方法？

Answer 1

Typescript无法检查组件之间的null数据，因为类型检查必须在运行时而不是编译时进行。实现这一点最安全的方法是将person作为道具传入。

父

<Route path={"/cards"}>
{person && <Cards person={person} />}
</Route>

组件

import { usePerson } from "store/hooks/person"
export const Cards = ({ person }: { person: PersonType }): JSX.Element => {
const { randomData } = useCards({person})