Блог

В моем функциональном компоненте / странице у меня есть const / function, которому я передаю сообщения об ошибках, который затем обновляет пару записей useState и регистрирует ошибку на консоли. Это выглядит так:

 const catchError = (e:any, message:string) => {
    //throw new Error(e)
    setMessage(message);
    setLoading(false);
    console.error(e);
};
 

Я хотел бы переместить этот код в хук (?) / вспомогательный файл, который позволит мне импортировать его в любой другой компонент. Это означало бы, что я могу использовать один централизованный фрагмент кода, а не писать один и тот же код в нескольких местах и избегать связанных с этим проблем.

Итак, я создал новый catchError.tsx файл со следующим содержимым:

 import { useState } from 'react';

const [ message, setMessage ] = useState("idle");
const [ loading, setLoading ] = useState(false);

export const catchError = (e:any, message:string) => {
    //throw new Error(e)
    setMessage(message);
    setLoading(false);
    console.error(e);
};
 

Однако, когда я визуализирую это, я получаю следующую ошибку компиляции:

Не удалось скомпилировать

Строка src / hooks / catchError.tsx 3:33: Реагирующий хук «useState» не может быть вызван на верхнем уровне. Реагирующие хукеры должны вызываться в компоненте функции React или пользовательской функции React-hooks / rules-of-hooks Строка 4:33: Реагирующий хук «useState» не может быть вызван на верхнем уровне. Реагирующие хукеры должны вызываться в компоненте функции React или пользовательской функции React-Hook react-hooks / rules-of-hooks

Найдите ключевые слова, чтобы узнать больше о каждой ошибке.

Для меня это новая территория.

(PS: я новичок в React / TypeScript и буду приветствовать любые исправления в моей терминологии).

Если вы хотите повторно использовать логику хуков (например, useState), вы можете написать свои собственные пользовательские хуки.

Я считаю, что что-то вроде so может сработать, хотя я не совсем уверен, как это будет использоваться без дополнительного контекста.

 import { useState } from 'react';

function useCatchError() {
  const [ message, setMessage ] = useState("idle");
  const [ loading, setLoading ] = useState(false);

  const catchError = (e:any, message:string) => {
    //throw new Error(e)
    setMessage(message);
    setLoading(false);
    console.error(e);
  };

  return { catchError, message, loading };
}
 

И использоваться как

 export function Foo() {
  const {catchError, message, loading} = useCatchError();
  
  try {
    bar();
  } catch (e) {
    catchError(e, e.message);
  }

  return (
    <div>
       {message ? `Error: ${message}` : loading ? "Loading" : "Foo"}
    </div>
  );
}
 

Подробнее о пользовательских хуках в документах React: https://reactjs.org/docs/hooks-custom.html