时间戳

首页 > 解决方案 > 使用 TypeScript 在 React 中从 GraphQL 查询访问嵌套数据时出现问题

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

问题描述

我已经使用以下结构设置了 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)

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

谢谢你的帮助。标记

标签： reactjsgraphqlreact-typescript

解决方案

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

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

推荐阅读