如何在 React 中使用“useErrorHandler()”？

Question

react-error-boundary我正在从这里查看图书馆，但我不明白如何使用该useErrorHandler(error?: Error)道具。

假设我用错误边界包装我的应用程序 - 像这样

import {ErrorBoundary} from 'react-error-boundary';

<ErrorBoundary onError={myErrorHandler}>
  <App />
</ErrorBoundary>

如何使用“useErrorHandler”来捕获异步代码回调中的错误，例如传播到ErrorBoundary以便我可以使用myErrorHandler？

“useErrorHandler”在哪里定义或导入？

我正在尝试使用它作为捕获所有错误设置 - 有点像当您将 throws excection 添加到 java 中的 main 时。

异步代码示例：

  ...
  return new Promise(function (resolve, reject) {
      axios({
        ...
      })
        .then((res) => {
          resolve(res);
          // <-- ?
        })
        .catch((err) => {
          reject(err);
        });
    });

Answer 1

文档没有明确说明如何导入该useErrorHandler函数，但它是 API 的一部分，因此您可以按照与 import 相同的方式导入ErrorBoundary。

import { useErrorHandler } from 'react-error-boundary';

例如：（基于文档）

    import { useErrorHandler } from 'react-error-boundary';
    
    function Greeting() {
      const [greeting, setGreeting] = React.useState(null)
      const handleError = useErrorHandler()
     
      function handleSubmit(event) {
        event.preventDefault()
        const name = event.target.elements.name.value
        fetchGreeting(name).then(
          newGreeting => setGreeting(newGreeting),
          handleError,
        )
      }
     
      return greeting ? (
        <div>{greeting}</div>
      ) : (
        <form onSubmit={handleSubmit}>
          <label>Name</label>
          <input id="name" />
          <button type="submit"}>
            get a greeting
          </button>
        </form>
      )
    }