打字稿和反应 - 对象可能是“空”

Question

所以我在具有这种类型的反应组件中使用的打字稿中有对象：

export type DataInfoTypes<dataType> = {
  data: dataType | null;
  loading: boolean;
  error: boolean;
};

假设会有“dataType”（应该没关系，只是一个字符串对象）：

{[key in string]: string}

然后当我在 React 组件中使用这个数据时，我检查 object.data 是否不为空：

if (!materials.data || materials.loading) {
  return <DataLoading />;
}

然后在我的返回函数中，当我引用数据时似乎还可以：

<Flex alignItems="center" direction="column">
  <Text>{materials.data["somekey"]}</Text>
  <VStack w="100%" ....

不过几行下面我有一个数组映射方法（在同一个组件中，相同的返回）：

<VStack w="100%" align="center">
  {sources.map((matKey: string, index: number) => {
    return <Text key={index}>{materials.data["somekey"]}</Text>
  }
</VStack>

我得到这个错误：

对象可能是“空”。 TS2531

关于如何解决此问题或原因是什么的任何想法？ （如果可能，请排除所有 tsignore 解决方案）
非常感谢大家的回复。

Answer 1

data 的声明类型为dataType 或null。 ts 编译器告诉您的是，您正在尝试访问可能为 null 值的属性 (.someKey)，这将导致运行时错误。

要修复它，请使用optional chaining:

materials.data?.somekey

当data 不是null 和undefined 当data 是null 时将返回data.somekey 的值。

最重要的是，当data 为假时，可选链接不会引发运行时错误。