TypeError：无法读取未定义的属性“匹配”（ react 和 graphql ）

Question

我正在尝试从 URL 中获取一部分以将其作为参数传递给 graphql，以便我可以获取数据！首先，我创建了一个 react 应用程序并从 graphql 获取数据以获取所有订单的列表，然后我创建了一个按钮，该按钮将重定向到应该显示订单详细信息的新页面

订单号是这样的：gid://shopify/Order/12345678（不仅仅是数字）

订单页面详细信息的链接如下所示：http://localhost:3000/orders/gid://shopify/Order/12345678

为了访问这个页面，我在我的 ListOrders 组件中添加了这个链接：

 <Link to={`/orders/${id}`} className="btn btn-secondary">
  Details
 </Link>

虽然我在路线上遇到了问题，但我通过制作这样的路径解决了它：

 <Route exact path='/orders/gid://shopify/Order/:id' component={OrderDetails}  />

我正在尝试在 Orderdetais 组件中以这种方式从 url 获取 ID：

 let { id } = props.match.params.id;

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;
  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(({ id, createdAt }) => (
            <tr key={id}>
              <td>{createdAt} </td>
            </tr>
          ))}
        </tbody>
      </Table>
    </div>
  );
}

我需要从 URL 获取 id (gid://shopify/Order/12345678) 并将其传递给变量，如图所示，但我收到此错误 TypeError: Cannot read property 'match' of undefined强>

更新：

此错误已更正，但我仍然无法从 graphql 获取详细信息数据，因为只有 id 中的数字作为变量发送！

更新：

<Route exact path='/orders/:gid://shopify/Order/:id' component={OrderDetails}  />

错误：TypeError: Cannot read property 'map' of null

请求中发送的变量：id：12345678（只有数字，但我需要 gid://shopify/Order/12345678）

Answer 1

在定义props 时不应使用{}。

export default function OrderDetails(props) {

更新

改变

<Route exact path='/orders/gid://shopify/Order/:id' component={OrderDetails}  />

到

<Route exact path='/orders/:id' component={OrderDetails}  />

当你调用 gql 查询时，像下面这样传递 id。

const { loading, error, data } = useQuery(GET_Single_Orders, {
    variables: { id: `gid://shopify/Order/${id}` }
});