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

Question

我已经用以下结构设置了一个GraphQL查询，并将其传递给React进行渲染：

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

我有两个具体的问题：

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

{props.event.subscribedUsers.length}

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

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

   {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}