Как передать аргумент в хук useCallback?

Question

Я пытаюсь использовать хук useCallback, чтобы изменить язык с помощью плагина gatsby-intl , у них есть метод (changeLocale()), который можно использовать для изменения языка по умолчанию: сайт. Я хотел избежать передачи реквизита в функции стрелки JSX, несмотря на то, что решение работает, поэтому я пытаюсь использовать хук useCallback.

onClick={()=>switchLanguage(language.iso)}

Вот мой компонент:

import React, { useCallback, useState } from 'react';
    import { changeLocale } from 'gatsby-plugin-intl';
    import { useLanguages } from '../../../hooks/useLanguages';

    export const LanguageSwitcher = (callback, deps) => {
      const languages = useLanguages();

      const switchLanguage = useCallback(language => changeLocale(language),[]);

      return <ul>
        {languages.map((language, index) => <li key={index} onClick={switchLanguage(language.iso)}>{language.name}</li>)}
      </ul>;

    };

Приведенный выше код создает бесконечный рендеринг, код вводится по функции switchLanguage без ее нажатия.

Однако, если я удаляю аргумент, он работает как положено, но я не знаю, на каком языке нажимает пользователь.

  const switchLanguage = useCallback(()=> console.log('item clicked'),[]);

Я также пытался использовать другие хуки, такие как как useState, но создает слишком много рендеров.

Как передать аргумент useCallback? Если это невозможно, какой будет лучшим обходным путем или подходом?

Answer 1

onClick={switchLanguage(language.iso)} вызывает switchLanguage и устанавливает его возвращаемое значение как onClick, точно так же, как onClick = switchLanguage(language.iso) будет вне JSX.

Чтобы связать с ним аргумент, вы ' Используйте функцию-обертку:

onClick={() => switchLanguage(language.iso)}

... или bind, хотя она также создает функцию:

onClick={switchLanguage.bind(null, language.iso)}

Но : вероятно, нет много чего можно получить, используя useCallback в вашем примере. В таком случае вам, вероятно, вообще не нужно switchLanguage:

import React, { useCallback, useState } from 'react';
import { changeLocale } from 'gatsby-plugin-intl';
import { useLanguages } from '../../../hooks/useLanguages';

export const LanguageSwitcher = (callback, deps) => {
  const languages = useLanguages();

  return <ul>
    {languages.map((language, index) => <li key={index} onClick={() => changeLocale(language.iso)}>{language.name}</li>)}
  </ul>;
};