React Hook "useTranslation" 在 function "getMyMenu" 中被調用，它既不是 React function 組件也不是自定義 React Hook ZC1C425268E68385D1AB5074C17A4

Question

我正在從正常的 function 中調用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)];
};

Answer 1

您可以通過將useTranslation鈎子移動到MyNav組件主體並將翻譯 function t作為閉包傳遞給getMyMenu來修復它。

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顯式傳遞給所有函數

You could certainly update the function signature of recurseFn to also consume a "t" (translation?) function, but you'd still need to then also pass t into chk which would necessitate updating the original getMyMenu function to consume an additional argument.

例子：

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

  ...
}

解決方案 2 - 使用 curried 回調的更好解決方案

在這種情況下，我認為將getMyMenu設置為 curried function 可以幫助您將t包含在回調中，並允許在任何 React 組件外部聲明它。 recurseFn function 不需要知道任何關於t的信息，所以為什么要在那里公開它，對吧？

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

現在你從useTranslation鈎子返回值中解構t並傳遞給getMyMenu function。 這與在回調中關閉t function 的想法類似，就像我們在第一個答案中所做的那樣。

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 。

Answer 2

通過確保 function 名稱大寫，我能夠解決同樣的問題。 投訴明確指出“React 組件名稱必須以大寫字母開頭”。 更正此問題后，ESLint 消息消失了。