Question

我在从简单查询返回数据时遇到问题。我已使用Apollo的测试应用程序（https://codesandbox.io/s/nn9y2wzyw4）正确执行了此操作，但是当我尝试使用本地服务器中的数据执行此操作时，将抛出TypeError：无法读取未定义的属性“ map”。该查询显示在我的控制台日志和GraphQL游乐场中。

到目前为止，返回数据的唯一方法是map函数，但是我意识到它可能不适用于这种情况。我已经尝试过以百万种格式格式化我的return语句，但似乎没有。我了解这可能是一个非常简单的解决方案。

import React from "react";
import { render } from "react-dom";

import ApolloClient from "apollo-boost";
import { ApolloProvider, useQuery } from "@apollo/react-hooks";
import gql from "graphql-tag";

const client = new ApolloClient({
  uri: "http://localhost:4000/graphql"
});

function GetPokemon() {
  const { loading, error, data } = useQuery(gql`
    {
      pokemonById(id: "003") {
        id
        name
      }
    }
  `);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error :(</p>;

  console.log(data);

  return data.pokemonById.map((id, name) => (
    <div key={id}>
      <p>
        {id}: {name}
      </p>
    </div>
  ));
}

export const App = () => (
  <ApolloProvider client={client}>
    <div>
      <h2>My first Apollo app ?</h2>
      <GetPokemon />
    </div>
  </ApolloProvider>
);

有关更多上下文，我正在使用此GraphQL服务器的本地版本：https://github.com/axelhzf/graphql-pokemon-server

在操场上，我的查询显示如下：

{
  "data": {
    "pokemonById": {
      "id": "003",
      "name": "Venusaur"
    }
  }
}

Answer 1

您正在尝试在对象上使用地图。

  return  (
    <div key={id}>
      <p>
        {data.pokemonById.id}: {data.pokemonById.name}
      </p>
    </div>
  );

尝试返回查询时Map（）函数以未定义状态返回

1 个答案: