对象可能是“未定义的”。 TS2532答案

【问题标题】：Object is possibly 'undefined'. TS2532对象可能是“未定义的”。 TS2532
【发布时间】：2021-11-29 08:01:35
【问题描述】：

我不断收到对象可能是“未定义”。 TS2532，我知道这是由于将 setViewer 分配给 undefined 所致，我这样做是为了登录匹配，但我遇到了另一个问题。现在，我有 2 个数据进入 homeviewer，其中一个是公告，当我尝试访问数据时，它给了我 TS2532 错误。这是下面的代码。我是这些新手，我不知道要对 setViewer (setViewer: () => undefined) 进行哪些更改才能使其正常工作。

homeViewer.ts

import { createContext } from 'react';

import { HomeViewer } from '../types/home_viewer';

export interface ViewerContextType {
  viewer?: HomeViewer;
  setViewer: (home: HomeViewer) => void;
}

export const ViewerContext = createContext<ViewerContextType>({
  viewer: {},
  setViewer: () => undefined,
});

接口来自

export interface HomeViewer {
  user?: User;
  announcements?: Announcement;
}

我使用它的部分

const { viewer } = useContext(ViewerContext);

  const data = viewer?.announcements;

  console.log(data[0]);

【问题讨论】：

标签： reactjs typescript graphql viewcontext

【解决方案1】：

这可能是因为如果 viewer 是 undefined 那么 data 也将是 undefined，你可以' t 做 data[0] 因为与 undefined[0]

相同

【讨论】：

【解决方案2】：

如果我理解正确，您的问题是围绕从data 访问特定索引处的元素——其中data 的值可能为undefined（根据您的HomeViewer 接口）；

export interface HomeViewer {
 user?: User;
 announcements?: Announcement;
}

在我看来，Announcement 类型似乎表示某些元素的数组（根据您访问其数据的方式来判断）或undefined（因为它是可选的）。

意思是，它肯定不会是 Announcement 的类型声明的实例，因此您必须链接一个可选的访问运算符来访问可能不存在的数组元素：?.;

const { viewer } = useContext(ViewerContext);
const data = viewer?.announcements;

console.log(data?.[0]) // -> Ok!
console.log(data[0])  //  -> Err! Object is possibly undefined.

【讨论】：