打字稿和反應 - 對象可能是“空”

Question

所以我在具有這種類型的反應組件中使用的打字稿中的對象：

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

讓我們假設“dataType”會有（應該無關緊要，只是一個字符串對象）：

{[key in string]: string}

然后當我在 React 組件中使用這些數據時，我檢查 object.data 是否不為 null：

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 )，這將導致運行時錯誤。

要修復它，請使用可選鏈接：

materials.data?.somekey

這將返回的值data.somekey時data不null和undefined當data為null 。

最重要的是，當data為假時，可選鏈不會引發運行時錯誤。