使用 TypeScript 在 React 中从 GraphQL 查询访问嵌套数据时出现问题

Question

我设置了一个具有以下结构的 GraphQL 查询，我将其传递给 React 进行渲染：

 {
  events{
    id
    name
    startDate
    endDate
    subscribedUsers{
      id
      name
    }
  }
}

我有两个具体问题：

1. 在一个视图中，我有一个表格，我想在其中显示事件详细信息和订阅用户的数量。当我 console.log 订阅用户时，它看起来像一个数组，它没有我可以引用的 .length 属性，而且我似乎无法对其应用数组方法来获取长度。当我尝试用
渲染它时

{props.event.subscribedUsers.length}

我收到错误Property 'length' does not exist on type '{ id: string; name: string; }'.ts(2339)

1. 在单个事件详细信息的第二个视图中，我想将用户的名称映射到子组件以进行渲染，但由于它似乎不是真正的数组，因此映射不起作用：

   {props.subscribedUsers.map((attendee: attendeeType) => {...}}

返回类似的错误Property 'length' does not exist on type '{ id: string; name: string; }'.ts(2339)

有没有办法可以将订阅的用户数据转换为我可以正常访问的数组，或者我怎样才能最好地获取数据？

感谢您的帮助。标记

Answer 1

您实际上已经指出了原因。查看架构 - 错误提示数据不是数组。它是一个普通的对象，您可以使用简单的点符号来访问它，例如：

{props.subscribedUsers.id} or   {props.subscribedUsers.name}