如何使用useIntl钩子并本地化数组元素

Question

我有一个基本的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

问题是您从非反应函数调用Hook。你不能那样做。尝试移动"；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>
);

};