Как использовать 'useErrorHandler ()' в React?

#javascript #reactjs #react-hooks

#javascript #reactjs #реагирующие хуки

Вопрос:

Я смотрю на react-error-boundary библиотеку отсюда, но я не понимаю, как использовать useErrorHandler(error?: Error) prop.

Итак, допустим, я оборачиваю свое приложение границей ошибки — что-то вроде этого

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

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

Как мне использовать ‘useErrorHandler’ для перехвата ошибок в обратных вызовах асинхронного кода, например, для распространения ErrorBoundary , чтобы я мог затем использовать myErrorHandler ?

Где определяется или импортируется ‘useErrorHandler’?

Я пытаюсь использовать это как настройку для всех ошибок — вроде того, когда вы добавляете исключение throws в main в java.

пример асинхронного кода:

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

1. Из документов, на которые вы ссылались, кажется useErrorHandler , что он используется для обработки ошибок, которые не обрабатываются react framework, то есть тех, которые обычно обрабатываются границей ошибки. В документах даже есть пример. Я думаю, что может сбивать handleError с толку то, что обратный вызов передается как обработчик отклонения цепочки обещаний, который затем может быть отклонен. Похоже, вы даже можете напрямую передавать объекты ошибок useErrorHandler . У вас есть пример какого-нибудь вашего асинхронного кода, в котором вы хотите использовать перехват ошибок?

2. @DrewReese добавил пример

3. Если я предполагаю, что это какая-то служебная функция, которая возвращает обещание, то в вызывающей ее функции она может вызывать handleError .catch цепочку обещаний или catch блок try / catch. На самом деле я имел в виду пример кода вашего компонента react, который вызывает некоторые асинхронные функции.

Ответ №1:

В документации не разъясняется, как импортировать useErrorHandler функцию, но это часть API, поэтому вы можете импортировать так же, как и импортировать 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>
      )
    }