时间戳

首页 > 解决方案 > 对象可能是“未定义的”。TS2532

reactjs - 对象可能是“未定义的”。TS2532

问题描述

我不断收到对象可能是“未定义”。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]);

标签： reactjstypescriptgraphqlviewcontext

解决方案

如果我理解正确，您的问题是围绕访问特定索引处的元素从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.

推荐阅读