当组件未呈现时，打字稿空检查自定义钩子 return 数据

Question

我们正在提取数据并使用 Redux Tool Kit 使用它。然后我们根据该数据的可用性有条件地渲染组件。但是，如果我使用自定义 RTK 挂钩访问组件中没有该数据就不会呈现的数据，Typescript 仍然会抱怨数据可能为空。

Parent

<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 无法跨组件检查空数据，因为类型检查必须在运行时而不是编译时完成。最安全的实现方式是将 person 作为 prop 传入。

Parent

<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})

当组件未呈现时，打字稿空检查自定义钩子 return 数据

Typescript null checking custom hook return data when component not rendered

typescript

reactjs

redux

redux-toolkit