React + GraphQL：dataArray.map 不是函数

Question

我刚开始学习 graphQL 和 Apollo。

下面是使用 Apollo 客户端的示例客户端代码。

我正在提供来自 nodemon express 服务器的数据。

console.log(data) 显示服务器的输出。

然而，我试图使用 apollo 客户端显示查询结果，但我无法做到这一点。我被困在这个问题上，任何帮助将不胜感激。

import React from "react"
import { Query } from "react-apollo";
import gql from "graphql-tag";

export const ExchangeRates = () => (
    <Query
        query={gql`
      {
        counterparty {
         name
       }
      }
    `}
    >
        {({ loading, error, data }) => {
            if (loading) return <p>Loading...</p>;
            if (error) return <p>Error :(</p>;

            console.log(data)   // Works fine as expected
            var a= data.map(x=>{
                return x.name
            })

            return <div> Data {a}</div> // stuck here ..how to display data
        }}

    </Query>
);

下面的代码给出一个错误并说

TypeError: data.map is not a function

但是 console.log(data) 工作正常，输出如下：-

Answer 1

你在这里做错了...你的数组在 data.counterparty... 试试这个

var a= data.counterparty.map(x=>{
                return x.name
            })

React + GraphQL：dataArray.map 不是函数

React + GraphQL: dataArray.map is not a function

reactjs

graphql

react-apollo

apollo-client