Почему появляется бесконечный цикл в моем коде?

Question

[Denis_8106]

Почему появляется бесконечный цикл в моем коде?
Появляется сообщение: Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

import React, { useState } from 'react';
import { useLocation } from 'react-router-dom';
import Switcher from '../Switcher/Switcher';
import { contextArr } from '../../db';

import './Setting.scss';

export default function Component() {
	const location = useLocation();
	let [lang, setLang] = useState('en');

	const chooseLang = (e) => {
		setLang(e.target.checked ? (lang = 'ua') : (lang = 'en'));
	};

	window.location = location.pathname + '#' + lang;

	for (let key in contextArr) {
		let elem = document.querySelector('.lng-' + key);
		if (elem) {
			elem.innerHTML = contextArr[key][lang];
		}
	}

	return (
		<section id='setting'>
					<Switcher
						id='lang'
						title='Language'
						label_lt='English'
						label_rt='Українська'
						value={lang}
						onClick={chooseLang}
					/>
		</section>
	);
}

Comments

[Denis_8106]

Switcher имеет такой вид...

import React from 'react';
import './Switcher.scss';

export default function Switcher({ ...props }) {
	return (
		<div className='switcher'>
			<h3>{props.title}</h3>
			<div className='box'>
				<input
					type='checkbox'
					onClick={props.onClick}
					value={props.value}
					id={props.id}
				/>
				<label htmlFor={props.id}></label>
				<div className='labels df'>
					<p className='label-lt'>{props.label_lt}</p>
					<p className='label-rt'>{props.label_rt}</p>
				</div>
			</div>
		</div>
	);
}

[Gary_Ihar]

Denis_8106, это все происходит когда кликаешь по инпуту в switcher ?

Answer 1

[Alexandroppolus]

Судя по всему, ошибка выскакивает в каком-то другом, классовом компоненте.
Здесь вижу такую проблему: window.location меняется в рендере, что совсем неправильно. Это должно происходить в useEffect

useEffect(() => {
  window.location = location.pathname + '#' + lang;
}, [location.pathname, lang]);

Comments

[Denis_8106]

Волшебно! Все работает! Спасибо большое, Alexandroppolus. Немного погуглил, и понял что часто используют location c хуками useLocation + useEffect, но немного у меня не получалось как хотелось. Ваш код зашел в точку. Еще раз спасибо.

[Alexandroppolus]

Denis_8106,

понял что часто используют location c хуками useLocation + useEffect

обычно в комплекте к этим ништякам ещё идет useHistory, но тут не принципиально