QueryErrorResetBoundary
TypeScript
1function QueryErrorResetBoundary(props: QueryErrorResetBoundaryProps): Element;定义于:packages/react-query/src/QueryErrorResetBoundary.tsx:160
当你在查询中使用 suspense 或 throwOnError 时,你需要一种方式来告知查询:在发生某些错误后重新渲染时,你希望重试。借助 QueryErrorResetBoundary 组件,你可以在该组件的边界内重置任意查询错误。
参数
props
要渲染的 children。
props 属性
| 属性 | 类型 | 描述 |
|---|---|---|
children |
| ReactNode | QueryErrorResetBoundaryFunction |
要么是一个普通节点,要么是一个接收边界 QueryErrorResetBoundaryValue 的函数,并返回一个节点。 |
返回值
Element
按原样渲染的 children;若 children 是一个函数,则以边界的 QueryErrorResetBoundaryValue 为参数调用该函数。
示例
TypeScript
1import { ErrorBoundary } from 'react-error-boundary'2import { QueryErrorResetBoundary } from '@tanstack/react-query'3 4function App() {5 return (6 <QueryErrorResetBoundary>7 {({ reset }) => (8 <ErrorBoundary9 onReset={reset}10 fallbackRender={({ resetErrorBoundary }) => (11 <div>12 There was an error!13 <button onClick={() => resetErrorBoundary()}>Try again</button>14 </div>15 )}16 >17 <Page />18 </ErrorBoundary>19 )}20 </QueryErrorResetBoundary>21 )22}