无法查询graphql查询的结果，因为彼此之间使用2个数组

问题描述

这是我的地图函数，正在与gatsby一起使用。

Here is my map function, I am using react with gatsby.

当我运行graphiql浏览器时（IDE graphql游乐场），我将组作为数组，并且edges也是一个数组。

when I run my graphiql browser, (an IDE graphql playground) I get group as an array, and edges is also an array.

查询是静态查询，映射函数位于基于类的react组件内部

the query is a static query and the mapping function is inside of a class based react component

{group.map(({ edges }) => {
   console.log(group);
     edges.map(index => {
       return <p>Hello</p>
   });
})}

但是，p标签没有显示任何内容，但是如果我console.log（ hello）可以进行4次控制台打扰，那么有人有什么主意吗？
我有些困惑。

However, the p tags are not displaying anything, but if I console.log("hello") it consoles hello 4 times, anyone got any ideas?I am a little stumped.

console.log返回

the console.log returns

(3) [{…}, {…}, {…}]
0:
edges: Array(2)
0:
node: {tune: "awesome", title: "Awesome Song", playtime: "2:50", page: "249", filesize: "1.8", …}
__proto__: Object
1:
node: {tune: "awesome", title: "AwesomeSong 2", playtime: "4:05", page: "525", filesize: "2.6", …}
__proto__: Object
length: 2
__proto__: Array(0)
__proto__: Object
1:
edges: Array(1)
0:
node: {tune: "decent", title: "Awesome Song3", playtime: "4:06", page: "719", filesize: "2.4", …}
__proto__: Object
length: 1
__proto__: Array(0)
__proto__: Object
2: {edges: Array(1)}
length: 3
__proto__: Array(0)

推荐答案

您尝试过类似的东西吗？

Have you tried something like this?

{group.map(({ edges }) => {
   return edges.map(({node})=> {
       return <p>{node.title}</p>
   });
})}

您需要在第一个中返回内容map（）循环。

此外，您是否在 render（）功能？否则，您将无法显示< p> 标记。

In addition, are you displaying the loop in a render() function? If not, you can't display a <p> tag.

这篇关于无法查询graphql查询的结果，因为彼此之间使用2个数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！