Как использовать хук useIntl и локализовать элементы массива

Question

У меня есть базовый c функциональный компонент React, и я привязываю массив, в котором есть строки для локализации. Есть ли другой способ сделать это? Я пытаюсь, как показано ниже, и появляется сообщение "Неверный вызов"

import { useIntl } from "react-intl";

const NavBasicExample: React.FunctionComponent = () => {  
  return (
      <Nav               
        groups={navLinkGroups}        
      />
    </div>
  );
};



const navLinkGroups: INavLinkGroup[] = [
  {
    name: getFormattedString(Strings.details),//This fails and says invalidHookCall
    links: [{ name: Strings.appDetails, url: "" }]
  },
  {
    name: Strings.capabilities,
    links: [
      { name: Strings.tabs},
      { name: Strings.bots}
    ]
  }
];



const getFormattedString = (inputString: string) => {
  const intl = useIntl(); //This fails.
  return intl.formatMessage({ id: "details", defaultMessage: "Login });
};

Answer 1

Проблема в том, что вы вызываете ловушку из нереагирующей функции. Вам не разрешено это делать. Попробуйте переместить «navLinkGroups» в «NavBasicExample», и он должен работать

import { useIntl } from "react-intl";

const NavBasicExample: React.FunctionComponent = () => {  
  const intl = useIntl();
  

  const navLinkGroups: INavLinkGroup[] = [
    {
      name: getFormattedString(Strings.details),
      links: [{ name: Strings.appDetails, url: "" }]
    },
    {
      name: Strings.capabilities,
      links: [
        { name: Strings.tabs},
        { name: Strings.bots}
      ]
    }
  ];
  
  const getFormattedString = (inputString: string) => {
    return intl.formatMessage({ id: "details", defaultMessage: "Login" });
  };

  return (
      <Nav               
        groups={navLinkGroups}        
      />
    </div>
  );


};