Я пытаюсь использовать хук 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
? Если это невозможно, какой будет лучшим обходным путем или подходом?