Javascript “反应钩”；使用翻译“；在函数“中调用”；getMyMenu"；它既不是React函数组件，也不是自定义React钩子函数

我在一个普通函数中调用

useTranslation

钩子，如下所示

import { useTranslation } from "react-i18next";


function getMyMenu(a) {
  const { t } = useTranslation('translations');
  
  if (a.showRoute) {
      a.label = t(a.label);
    return a;
  }
}



export const MyNav = props => {
  let tabs = recurseFn(getMyMenu, props.routes);
}

我得到以下错误。没有办法解决这个问题吗？出于某种奇怪的原因，我能够在其他项目中看到类似的代码模式。需要任何额外的配置来实现这一点吗

更新：

这就是我的

recurseFn

的样子：

export const recurseFn = (chk, [head, ...tail]) => {
  if (head === undefined) return [];
  if (chk(head)) {
    return [head, ...recurseFn(chk, tail)];
  }

  return [...recurseFn(chk, tail)];
};

---

您可以通过将

usetransation

钩子移动到

MyNav

组件主体并在

getMyMenu

中将翻译函数

t

作为闭包传递来修复它

import { useTranslation } from "react-i18next";

export const MyNav = props => {
  const { t } = useTranslation('translations');

  function getMyMenu(a) {
    if (a.showRoute) {
      a.label = t(a.label);
      return a;
    }
  }

  let tabs = recurseFn(getMyMenu, props.routes);

  ...
}

编辑 我刚刚更新了我的

recurseFn

的外观。有可能吗 把“t”传给它

解决方案1-将

t

显式传递给所有函数 当然，您可以更新递归函数的函数签名，以同时使用一个“t”（translation？）函数，但是您还需要将

t

传递到

chk

中，这需要更新原始的

getMyMenu

函数以使用额外的参数

例如：

function getMyMenu(t, a) { // <-- consume additional t argument
  if (a.showRoute) {
      a.label = t(a.label);
    return a;
  }
}

...

export const recurseFn = (chk, [head, ...tail], t) => { // <-- consume additional t argument
  if (head === undefined) return [];
  if (chk(t, head)) { // <-- pass t to chk
    return [head, ...recurseFn(chk, tail, t)]; // <-- pass t on recursion
  }

  return [...recurseFn(chk, tail, t)]; // <-- pass t on recursion
};

...

import { useTranslation } from "react-i18next";

export const MyNav = props => {
  const { t } = useTranslation('translations');

  let tabs = recurseFn(getMyMenu, props.routes, t); // <-- pass t on recursion

  ...
}

现在，从

usetransation

hook返回值中解构

t

，并传递到curried

getMyMenu

函数。这类似于在回调函数中关闭

t

函数，就像我们在第一个答案中所做的那样

import { useTranslation } from "react-i18next";

export const MyNav = props => {
  const { t } = useTranslation('translations');

  let tabs = recurseFn(getMyMenu(t), props.routes);

  ...
}

---

现在从

recurseFn

的角度来看，

t

包含在

chk

回调中，

recurseFn

不需要显式地处理接收和传递

t

。

非常感谢……我刚刚更新了我的recurseFn的外观。可以把“t”传递给它吗？@testndtv当然，我已经用我相信你会问的问题更新了我的答案。再次感谢你…是的，所以我倾向于解决方案2…但是，在const getMyMenu=>t=>a=>{…}行上看到一个错误，错误是“const声明需要一个初始化值”@testndtv Oops，非常正确，一个太多的

=>

，我已经更新了答案。它应该是

const getMyMenu=t=>a=>{….

。对此感到抱歉。非常感谢……这似乎现在工作得很好……虽然是最后一个问题……所以退一步，虽然我们似乎应该从React函数组件或自定义React钩子函数中调用钩子，但是否有一些例外……因为我在另一个应用程序中看到了相同的代码，而且可能看起来ed工作得很好…有例外吗？

import { useTranslation } from "react-i18next";

export const MyNav = props => {
  const { t } = useTranslation('translations');

  let tabs = recurseFn(getMyMenu(t), props.routes);

  ...
}