TypeError: Cannot read property 'match' of undefined ( react and graphql )
TypeError: Cannot read property 'match' of undefined ( react and graphql )
我正在尝试从 URL 中获取一部分,将其作为参数传递给 graphql,这样我就可以获取数据了!首先,我创建了一个 React 应用程序,并从 graphql 获取数据以获取所有订单的列表,然后我创建了一个按钮,该按钮将重定向到一个应该显示订单详细信息的新页面
订单id是这样的:gid://shopify/Order/12345678
(全部不是数字)
订单页面的 link 详细信息如下所示:http://localhost:3000/orders/gid://shopify/Order/12345678
为了访问此页面,我在我的 ListOrders 组件中添加了这个 link :
<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;
OrderDeatils 组件:
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 属性 'match' 未定义
更新:
此错误已更正,但我仍然无法从 graphql 获取详细信息数据,因为只有 id 中的数字作为变量发送!
更新:
<Route exact path='/orders/:gid://shopify/Order/:id' component={OrderDetails} />
错误:TypeError:无法读取 null属性'map'
请求中发送的变量:id:12345678(只有数字,但我需要gid://shopify/Order/12345678)
定义 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}` }
});
我正在尝试从 URL 中获取一部分,将其作为参数传递给 graphql,这样我就可以获取数据了!首先,我创建了一个 React 应用程序,并从 graphql 获取数据以获取所有订单的列表,然后我创建了一个按钮,该按钮将重定向到一个应该显示订单详细信息的新页面
订单id是这样的:gid://shopify/Order/12345678
(全部不是数字)
订单页面的 link 详细信息如下所示:http://localhost:3000/orders/gid://shopify/Order/12345678
为了访问此页面,我在我的 ListOrders 组件中添加了这个 link :
<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;
OrderDeatils 组件:
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 属性 'match' 未定义
更新:
此错误已更正,但我仍然无法从 graphql 获取详细信息数据,因为只有 id 中的数字作为变量发送!
更新:
<Route exact path='/orders/:gid://shopify/Order/:id' component={OrderDetails} />
错误:TypeError:无法读取 null属性'map'
请求中发送的变量:id:12345678(只有数字,但我需要gid://shopify/Order/12345678)
定义 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}` }
});