Как обновлять дочерние элементы которые принимают значение функции?

Question

[DZHAMBUALT]

Здраствуйте! Есть хук который возвращает перевод для компонентов реакт:

import en from '../../locales/en.json'
import ru from '../../locales/ru.json'

const translations = {
	en,
	ru,
}

export type LanguageCode = 'en' | 'ru'
export const useTranslation = (initialLanguage: LanguageCode = 'en') => {
	const [language, setLanguage] = useState<LanguageCode>(initialLanguage)
	const [texts, setTexts] = useState<(typeof translations)[LanguageCode]>(
		translations[initialLanguage]
	)

	useEffect(() => {
		setTexts(translations[language])
	}, [language])

	const t = useCallback(
		(key: string): any => {
			const value = key.split('.').reduce((obj, keyPart) => {
				if (obj && typeof obj === 'object') {
					return obj[keyPart]
				}
				return undefined
			}, texts as Record<string, any>)
			//@ts-ignore
			return value
		},
		[language]
	)

	return { t, setLanguage, language }
}

Проблема в том что при изменении language у меня не меняются переводы. Переводы получаются с помощью вызова функции t(key). Как мен обновлять переводы для таких компонентов.

interface Props {}
const Component: FC<Props> = ({}) => {
	const { t, setLanguage } = useTranslation()

	return (
		<>
			<div>{t('helloWorld')}</div>
			<button
				onClick={() => {
					setLanguage('ru')
				}}
			>
				{t('helloWorld')}
			</button>
		</>
	)
}

export { Component }

Answer 1

[0xD34F]

при изменении language у меня не меняются переводы

Меняются. С запаздыванием на один шаг. Потому что texts обновляется в эффекте, т.е., после того, как новая версия t будет создана. Так что t получает ссылку на старую версию texts.

Никакого texts не надо, доставайте в t нужный объект из translations напрямую:

const t = useCallback(
  key => key
    .split('.')
    .reduce((p, c) => p?.[c], translations[language]),
  [ language ]
);

Answer 2

[Александр Талалаев]

У вас бак в хуке следующий:
в useEffect вы реагируете на смену языка, и задаёте новый texts. НО в useCallback у вас в зависимостях тоже language, в результате после смены texts он уже не отрабатывает. Замените в useCallback зависимость на texts.
PS если это не в рамках обучения, то не советую писать свой инструмент для локализации сайта, лучше возьмите готовый, например i18n
PPS для подсказки в таких багах пусть и ненадёжно, но полезно использовать нейронные сети, к примеру chatgpt в целом хорошо расписывает если дать ему код вашего Хука и попросить найти баг, только что проверил даёт неплохие подсказки для начала. НО помните, что без опыта с нейронками легко выстрелить себе в ногу, тк не заметите где она там напридумывала всякую дичь.

Comments

[DZHAMBUALT]

Смотрите я попробовал то что вы сказали. Но перевод все равно не меняется

Вот измененный код

import en from '../../locales/en.json'
import ru from '../../locales/ru.json'

const translations = {
	en,
	ru,
}

export type LanguageCode = 'en' | 'ru'

export const useTranslation = (initialLanguage: LanguageCode = 'en') => {
	const [language, setLanguage] = useState<LanguageCode>(initialLanguage)
	const [texts, setTexts] = useState<(typeof translations)[LanguageCode]>(
		translations[initialLanguage]
	)

	useEffect(() => {
	        setTexts(translations[language])
	}, [language])

	const t = useCallback(
		(key: string): any => {
			const value = key.split('.').reduce((obj, keyPart) => {
				if (obj && typeof obj === 'object') {
					return obj[keyPart]
				}
				return undefined
			}, texts as Record<string, any>)
			return value
		},
		[texts]
	)

	return { t, setLanguage, language }
}

[Александр Талалаев]

DZHAMBUALT, вы конечно некрасиво поступаете заставляя меня выкладывать на площадки живой пример, но вот всё работает:
https://playcode.io/2187944

[DZHAMBUALT]

Простите я сам создал код в песочнице https://codesandbox.io/p/devbox/habr-1-f442r2 там работает у меня а на локалхост нет. Буду смотреть. Спасибо за помощь

Answer 3

[Alexandroppolus]

В пределах одного компонента твой хук должен работать. Но если два разных компонента используют useTranslation, то разумеется смена языка в одном не повлияет на второй. Хотя ты это и сам знаешь, я так, на всякий напомнил. Обычно текущий выбранный language хранят в контексте на весь апп.

Comments

[DZHAMBUALT]

Вот это действительно интересное замечание. Я тут с этим мучался не мог понять