Question

对象可能“未定义”。TS2532

2021-10-10

943

reactjs typescript graphql viewcontext

我一直收到 Object is perhaps 'undefined'. TS2532 的错误信息，我知道这是由于 setViewer 被赋值未定义所致，我这样做是为了进行登录匹配，但我遇到了另一个问题。现在，我有 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]);

Answer 1

如果我理解正确的话，您的问题在于从 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.

Answer 2

可能是因为如果 viewer 为 undefined ，则 data 也将为 undefined ，并且您无法执行 data[0] ，因为它与 undefined[0] 相同>