如何在React中使用'useErrorHandler()‘？

Question

我正在查看来自here的react-error-boundary库，但我不知道如何使用useErrorHandler(error?: Error)属性。

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

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

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

如何使用'useErrorHandler‘捕获异步代码回调中的错误，例如，传播到ErrorBoundary，这样我就可以使用myErrorHandler

'useErrorHandler‘是在哪里定义或导入的？

我正在尝试使用它作为一个捕获所有错误的设置-有点像在java中将抛出异常添加到main中。

异步代码示例：

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

Answer 1

文档并没有明确说明如何导入useErrorHandler函数，但它是API的一部分，因此您可以使用与导入ErrorBoundary相同的方式进行导入。

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

例如：(基于the documentation)

    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>
      )
    }