0

我试图在顶层捕获一些错误，以展示世界上最漂亮的错误页面。

出于某种原因，我看到我的节点断开连接，但错误边界从未触发。

import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import ApolloClient, { gql } from 'apollo-boost';

const client = new ApolloClient({ uri: "/graphql" });
const query = gql`{ items { id }}`;

class ErrorBoundary extends React.Component {
  state = { hasError: false };

  static getDerivedStateFromError(error: any) {
    return { hasError: true };
  }

  render() {
    if (this.state.hasError) {
      return <h1>Had error</h1>
    } else {
      return this.props.children;
    }
  }
}

function App() {
  const [data, setData] = useState<any>(null);

  useEffect(() => {
    client.query({ query })
      .then(res => setData(res))
      .catch(err => { console.warn("Error:", err); throw err; });
  }, []);

  return <pre>Data: {data}</pre>;
}

ReactDOM.render(
  <ErrorBoundary>
      <App />
  </ErrorBoundary>,
  document.getElementById('root')
);

我在一个空的 create-react-app 项目中运行它。

我希望看到<h1>Had error</h1>；我得到 CRA 未处理的错误屏幕。

4

1 回答 1

0

从文档

错误边界不会捕获以下错误：

  • 事件处理程序（了解更多）
  • 异步代码（例如 setTimeout 或 requestAnimationFrame 回调）
  • 服务器端渲染
  • 在错误边界本身（而不是其子项）中引发的错误

Promise 是异步的，因此被拒绝的 Promise 不会被错误边界捕获。目前，推荐的但有点hackish的方法是把错误扔进去setState。在功能组件中，您可以使用useState钩子返回的 set 函数代替setState：

const [, setState] = useState()
useEffect(() => {
  client.query({ query })
    .then(res => setData(res))
    .catch(err => {
      console.warn("Error:", err);
      setState(() => {
        throw err;
      });
    });
}, []);

扔进去useEffect也可以，但不能在Promise 的athen或回调中。catch您也不能将useEffect回调设为async函数，因为它不能返回 Promise。所以我们坚持使用setState.

另请注意，实际上没有理由client.query直接调用，特别是因为如果缓存更改，此代码不会重新呈现您的 UI。您应该使用钩子已经为您公开useQuery的状态。data

于 2020-02-19T13:28:04.347 回答