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

Posted 2023-03-08

【中文标题】TypeError: data.Order.map 不是函数（ react 和 graphql ）

【英文标题】：TypeError: data.Order.map is not a function ( react and graphql )

【发布时间】：2021-04-04 22:50:52

【问题描述】：

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

OrderDetails 组件：

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

但我得到了这个错误（TypeError: data.Order.map is not a function）我不知道为什么我得到它！如何解决？

查询顺序的架构：

  "data": 
    "Order": 
      "id": "gid://shopify/Order/2950331957398",
      "displayFinancialStatus": "REFUNDED",
      "displayFulfillmentStatus": "UNFULFILLED",
      "email": "[e-mail]",
      "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"
      
    
  

【问题讨论】：

data.Order 必须返回对象，并且您正在尝试映射它。请检查

你能提供如何做的代码示例吗？那会很有帮助的！谢谢

你能分享查询Order 的架构，看看它返回什么？文字对象还是数组？

完成我更新了我的帖子，请再次检查！谢谢

【参考方案1】：

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

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

理想情况下，对于键，您需要执行类似 Order.id 之类的操作，它唯一地代表该行。

【讨论】：

我用您提供的代码替换了这些部分，但它没有修复错误它是一样的！

我已经更新了我的sn-p，代码中应该没有data.Order.map。

这项工作适用于简单的文件，但是当我尝试访问更深入的内容时，例如 data?.Order?.shippingAddress?.company 我什么也没得到（也没有错误）只是一个空的公司数据应该出现的地方！任何解决方案。？

你能在上面的代码中添加一个例子吗？

您没有看到任何内容，因为您的公司为空。