react-hooks实现下拉刷新

Posted 2023-04-07

参考技术A index.js文件

index.less

quote.jsx 组件引用

这是我基于react-hooks写的一个下拉刷新组件，如果有谁在使用的过程中，发现问题，请麻烦指出。

使用@apollo/react-hooks，react 应用程序在刷新过期时严重崩溃

【中文标题】使用@apollo/react-hooks，react 应用程序在刷新过期时严重崩溃

【英文标题】：Using @apollo/react-hooks, the react app crashes hard on refresh being expired

【发布时间】：2020-09-22 16:37:59

【问题描述】：

当我未登录时，我收到此错误：

Unhandled Rejection (Error): GraphQL error: Refresh has expired

它发生在这个代码块中：

  const  loading, error, data  = useQuery(GET_BILLABLE_EVENTS, 
    fetchPolicy: 'no-cache',
    errorPolicy: 'ignore',
    onError: (err) => 
      console.log( err );
    ,
  );
  return <div>hello</div>;

我真的希望它能够被优雅地处理，但它只会使 React 崩溃并抛出错误，尽管选项中设置了错误策略和 onError。

重新启动 create-react-app 时，似乎卡在了这个错误循环中。

【参考方案1】：

您不能在到达 useQuery 之前检查用户是否经过身份验证吗？

我认为你应该能够通过将组件包裹在“错误边界”周围来优雅地处理它

From react documentation

错误边界是 React 组件，它们在其子组件树的任何位置捕获 JavaScript 错误，记录这些错误，并显示后备 UI 而不是崩溃的组件树。错误边界在渲染期间、生命周期方法中以及它们下方的整个树的构造函数中捕获错误。

<ErrorBoundary>
  <App />
</ErrorBoundary>

ErrorBoundary Example