TypeError: data.Order.map is not a function ( react and graphql )

Question

我正在尝试使用 react 从 graphql 获取数据，目的是获取单个订单的详细信息！我创建了一个所有订单的列表并且它工作正常但是当我试图在另一个页面中获取单个订单的数据时它不起作用：

订单详情 组件：

import React from 'react'
import { gql, useQuery } from '@apollo/client';
import Table  from 'react-bootstrap/Table'
import { Link } from 'react-router-dom';
const GET_Single_Orders = gql`
query Order($id: ID!){
    Order (id: $id){
      id
      displayFinancialStatus
          displayFulfillmentStatus
          email
          id
          createdAt
          subtotalPrice
          totalRefunded
          totalShippingPrice
          totalPrice
          totalTax
          updatedAt
          lineItems{
              edges {
                  node {
                      customAttributes{
                          key
                          value
                      }
                      quantity
                      title
                      id
                      variant{
                          id
                          title
                          weight
                          weightUnit
                          price
                          image {
                              src
                          }
                      }
                  }
              }
          }
          shippingAddress {
              address1
              address2
              city
              company
              country
              countryCode
              firstName
              id
              lastName
              name
              phone
              province
              provinceCode
              zip
          }
    }
  }
`;

export default function OrderDetails(props) {
    let  id  = props.match.params.id;
   id = "gid://shopify/Order/" + id ;
  const { loading, error, data } = useQuery(GET_Single_Orders, {
    variables:  {id}
    ,
  });

  if (loading) return <h4>Loading...</h4>;
  if (error) return `Error! ${error}`;

  return( <div>
  
 <Table striped bordered responsive hover size="sm">
  <thead>
    <tr>
    
      <th>Created at</th>
      <th>created by</th>
      <th>Fulfillment</th>
      <th>Financial Status</th>
      <th>total Price</th>
      <th>Action</th>
 
    </tr>
  </thead>
  <tbody>
 {data.Order.map(({ Order , createdAt , totalPrice  }) => (
  
    <tr key={totalPrice}>
   
     <td>{createdAt} </td>
   
    </tr>
  
  ))}
  </tbody>
</Table>

 </div>
 )}

但是我得到了这个错误（类型错误：data.Order.map 不是一个函数）我不知道为什么我得到它！如何解决？

查询顺序的架构：

{
  "data": {
    "Order": {
      "id": "gid://shopify/Order/2950331957398",
      "displayFinancialStatus": "REFUNDED",
      "displayFulfillmentStatus": "UNFULFILLED",
      "email": "bla@gmail.com",
      "createdAt": "2020-11-19T15:13:44Z",
      "subtotalPrice": "3795",
      "totalRefunded": "4445",
      "totalShippingPrice": "650",
      "totalPrice": "4445",
      "totalTax": "345",
      "updatedAt": "2019-1-24T07:33:42Z",
      "lineItems": {
        "edges": [
          {
            "node": {
              "customAttributes": [],
              "quantity": 1,
              "title": "bla",
              "id": "gid://shopify/LineItem/12345678",
              "variant": {
                "id": "gid://shopify/ProductVariant/12345678",
                "title": "ブラウン / ONE",
                "weight": 0,
                "weightUnit": "KILOGRAMS",
                "price": "3795",
             
              }
            }
          }
        ]
      },
      "shippingAddress": {
        "address1": "adresse here",
        "address2": "",
        "city": "city here",
        "company": null,
        "country": "Japan",
        "countryCode": "JP",
        "firstName": "コウスケ",
        "id": "gid://shopify/MailingAddress/123456789?model_name=Address",
        "lastName": "bla",
        "name": "bla",
        "phone": null,
        "province": "Tōkyō",
        "provinceCode": "JP-13",
        "zip": "187-0022"
      }
    }
  }
}

Answer 1

map 是数组原型上可用的函数。返回的数据是一个对象，因此您不能在对象上使用 .map。改为这样做：

  <tbody>
    <tr key={data?.Order?.totalPrice}>
     <td>{data?.Order?.createdAt} </td>   
    </tr>
  </tbody>

理想情况下，对于键，您可能希望做类似 Order.id 的事情，它唯一地代表该行。

TypeError: data.Order.map is not a function ( react and graphql )

TypeError: data.Order.map is not a function ( react and graphql )

javascript

reactjs

graphql

jsx

react-apollo