react-query 查询错误边界处理

「爱情、让人受尽委屈。」 2021-07-25 01:22 422阅读 0赞

让查询知道您希望在发生某些错误后重新呈现时再次尝试
    
    (1)错误边界组件使用react-error-boundary
    	cnpm install -D react-error-boundary
    	
    	import { ErrorBoundary } from 'react-error-boundary'
    	
    (2)使用reset处理查询错误
    	方式一:当使用组件时,它将重置组件边界内的任何查询错误
    	
    	   import { QueryErrorResetBoundary } from 'react-query'
    	   
    	   <QueryErrorResetBoundary>
    	     {({ reset }) => (
    	       <ErrorBoundary
    	         onReset={reset}
    	         fallbackRender={({ resetErrorBoundary }) => (
    	           <div>
    	             There was an error!
    	             错误发生时,调用resetErrorBoundary()方法,可以触发onReset回调
    	             <button onClick={() => resetErrorBoundary()}>Try again</button>
    	           </div>
    	         )}
    	       >
    	         <Page />
    	       </ErrorBoundary>
    	     )}
    	   </QueryErrorResetBoundary>
    
    方式二:使用useQueryErrorResetBoundary钩子
    	当使用该钩子时,它将重置最近的QueryErrorResetBoundary内的任何查询错误,如果没有定义边界,它将全局重置它们:
    	
     		 const { reset } = useQueryErrorResetBoundary()
     		 
    	     <ErrorBoundary
    	       onReset={reset}
    	       fallbackRender={({ resetErrorBoundary }) => (
    	         <div>
    	           There was an error!
    	           错误发生时,调用resetErrorBoundary()方法,可以触发onReset回调
    	           <Button onClick={() => resetErrorBoundary()}>Try again</Button>
    	         </div>
    	       )}
    	     >
    	       <错误组件 />
    	     </ErrorBoundary>