Используйте ответный крюк в HO C с переданными параметрами

Question

Я пытаюсь создать HO C и использовать собственный крюк реакции внутри. Также, чтобы использовать ловушку, мне нужно передать paras в HO C, но я получаю ошибку за использование ловушки только в теле функции. Мой HO C:

export const withUseAxisTranslate = (props) => {
  const [t] = useAxisTranslate(props.namespace);
  return (WrappedComponent) => (moreProps) => <WrappedComponent {...moreProps} t={t} />;
};

Мое использование AxisTranslate выглядит следующим образом:

import { useSelector } from 'react-redux';
import { useTranslation } from 'react-i18next';

//This one is behave like regular i18 translate
//It returns like t() in array function and use axis name in order to find specific key by axis name
const useAxisTranslate = (namespace) => {
  return [
    (stringToTranslate) => {
      const axisName = useSelector((state) => state.axisConfig.axis.name.toLowerCase());
      const [t] = useTranslation(namespace);
      return t(`${axisName}.${stringToTranslate}`);
    },
  ];
};

export default useAxisTranslate;

Мой вызов:

compose(
  withWidth(),
  withUseAxisTranslate({ namespace: 'header' }),
)(MyComponent);

Я получил ошибку :

Я понятия не имею, почему я получаю эту ошибку, так как здесь я не использую классы Спасибо за помощь

Answer 1

Здесь есть несколько вещей, на которые следует обратить внимание

• Вы пытаетесь использовать useAxisTranslate, который предназначен для пользовательского хука в withUseAxisTranslate, который является не компонентом, а функцией, возвращающей другую функцию .
• Вы используете useSelector и useTranslation в пользовательском хуке внутри возвращаемой функции, что снова нарушает правила

Решение здесь состоит в том, чтобы исправить обе вещи как показано ниже

export const withUseAxisTranslate = (props) => {
  return (WrappedComponent) => (moreProps) => {
        const [t] = useAxisTranslate(props.namespace);
        return <WrappedComponent {...moreProps} t={t} />
  }
};

и использовать AxisTranslate как

const useAxisTranslate = (namespace) => {
  const axisName = useSelector((state) => state.axisConfig.axis.name.toLowerCase());
  const [t] = useTranslation(namespace);
  const translateFunction = (stringToTranslate) => {
      return t(`${axisName}.${stringToTranslate}`);
  };
  return [
    translateFunction
  ];
};

Answer 2

Попробуйте переместить хук useAxisTranslate внутрь корпуса компонента, например

export const withUseAxisTranslate = (props) => {
    return (WrappedComponent) => (moreProps) => {
        const [t] = useAxisTranslate(props.namespace);
        return <WrappedComponent {...moreProps} t={t} />;
    }
};