Javascript TypeError:data.Order.map不是函数（react和graphql）

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

订单详细信息组件：

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>
 )}

---

map

是阵列原型上可用的功能。返回的数据是对象，因此不能在对象上使用

.map

。改为这样做：

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

{data？.Order？.createdAt}

---

理想情况下，对于键，您需要执行类似于

Order.id

的操作，它唯一地表示该行。

data.Order

必须是返回对象，并且您正在尝试映射它。请检查您能否提供如何执行此操作的代码示例？那会有帮助的！感谢您共享query

Order

的模式，看看它返回了什么？文字对象还是数组？我更新了我的帖子，请再次检查！thanksi用您提供的代码替换了这些部分，但没有修复错误，还是一样！我已经更新了我的代码片段，代码中应该没有

data.Order.map

。这对于简单的字段是有效的，但是当我试图访问更深层的东西，比如{data？.Order？.shippingAddress？.company}时，我没有得到任何东西（也没有错误），只有一个公司数据应该出现的空白位置！任何解决方案。你能在上面的代码中添加一个例子吗？你看不到任何东西，因为在你的例子中，公司是空的。

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