0

我似乎无法让“计数”数据显示在 UI 中。我确定我错过了在同一个容器中使用两个片段或渲染边缘数组或异步的东西，也许。所有其他数据都显示除了{this.props.link.votes.count}在 UI 中显示为空的数据，同时在开发工具中的服务器或客户端上没有抛出任何错误。它只是没有出现。任何帮助将不胜感激。谢谢你。

反应组件看起来像：

       <div className="f6 lh-copy gray">
        {" "}
        {this.props.link.votes.count} votes | by {" "}
        {this.props.link.postedBy
          ? this.props.link.postedBy.name
          : "Unknown"}{" "}
        {timeDifferenceForDate(this.props.link.createdAt)}{" "}
      </div>{" "}

我有这个工作的 graphql 查询，它可以在 graphiql 中提取正确的数据。

{
  links(first: 20) {
    pageInfo {
      hasPreviousPage
      hasNextPage
    }
    edges {
      node {
        id
        url
        description
        votes {
          ...Link_votes
        }
      }
    }
  }
}

fragment Link_votes on VoteConnection {
  edges {
    cursor
    node {
      count
    }
  }
}

这是输出

{
  "data": {
    "links": {
      "pageInfo": {
        "hasPreviousPage": false,
        "hasNextPage": false
      },
      "edges": [
        {
          "node": {
            "id": "TGluazo1OWRiNDc4ODY5YmJkOTViOWY2YzVkMGY=",
            "url": "afasfdasf",
            "description": "adasdf",
            "votes": {
              "edges": [
                {
                  "cursor": "YXJyYXljb25uZWN0aW9uOjA=",
                  "node": {
                    "count": "3"
                  }
                }
              ]
            }
          }
        }
      ]
    }
  }
}

在我的 Link.js 组件中，我有这些重复上述 graphql 调用的片段

createFragmentContainer(


Link,
  graphql`
    fragment Link_votes on VoteConnection {
      edges {
        cursor
        node {
          count
        }
      }
    }
  `
);

export default createFragmentContainer(Link, {
  link: graphql`
    fragment Link_link on Link {
      id
      description
      url
      createdAt
      postedBy {
        id
        name
      }
      votes {
        ...Link_votes
      }
    }
  `
});

完整的 Link.js 文件在这个要点中中。

因此，考虑到“链接”节点的结构，这个想法应该可行：

{this.props.link.votes.edges[0].node.count}

'link' 为您提供您在 graphql 响应中的链接。'votes' 为您提供 votes 键，该键具有一组边，该数组始终只返回数组中包含投票计数结果的一个对象。因此，您希望该数组中的索引为 0

`{ "cursor": "YXJyYXljb25uZWN0aW9uOjA=",
   "node": { 
      "count": "3"
   }
 }`

如果我们想要索引 0 上的节点属性，我们使用点表示法，然后对象上的 count 属性键也是如此。这是行不通的。

4

1 回答 1

1

这是有效的。

solution was to remove the Link_votes fragment container
```
createFragmentContainer(
  Link,
  graphql`
    fragment Link_votes on VoteConnection {
      edges {
        cursor
        node {
          count
        }
      }
    }
  `
);
```

在链接片段中，直接使用投票，

```
votes {
   edges {
      node {
         count
      }
   }
}
```

我认为这是一个过度思考的案例。我会把它留在这里，以防它帮助任何人。

于 2017-10-10T11:27:48.663 回答