Почему не рендерится компоннент после перезаписи массива?

Question

[McHack]

Суть вопроса в следующем. Есть массив элементов. После основного рендера я пересобираю его в ввиду того, что элементы просто не вмещаются по верстке.

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

Делается все на хуках. Пересобранный (мутировавший основной) массив я записываю через хуки (use{переменная}). Однако ре-рендера не происходит, происходит он только после изменения какого-то простого state-а (число или простая строка). Подскажите что я делаю не так, может мне стоит использовать другой подход?

Код под спойлером:

Код

function Menu(props) {
		const [items, setItems] = useState(Object.values(data.ITEMS))
		const [showChild, setShowChild] = useState(0)
		const [windowWidth, setWindowWidth] = useState(window.innerWidth)

		function setChild(e, event) {
			if(showChild > 0 && showChild == e) {
				$('.i_h_menu_child').fadeOut(function () {
					setShowChild(0)
				})
			}
			else
				setShowChild(e)

			event.preventDefault()
		}

		/*function componentDidMount() {
			updateWidthElements()
		}*/

		function addCatalog(arr) {
			let catalog = {
				'ID': 'CATALOG',
				'NAME': 'Каталог',
				'SECTION_PAGE_URL': '',
				'I_CHILD': []
			}

			arr.unshift(catalog)

			return arr
		}

		function updateWidthElements() {
			//setWindowWidth(window.innerWidth)
			let wMenu = document.querySelector('.i_h_menu_react').clientWidth,
				wBody = document.querySelector('.i_body').clientWidth,
				elements = items

			//console.log([wMenu, wBody])

			if(wMenu > wBody) {
				let el = elements.pop()
					//items = items

				if(elements[0]['ID'] == 'CATALOG') {
					elements[0]['I_CHILD'].push(el)
				}
				else {
					elements = addCatalog(elements)
					elements[0]['I_CHILD'].push(el)
				}
				setItems(elements)
				console.log(items)
				//updateWidthElements()
			}
		}
		useEffect(updateWidthElements, [])

		useEffect(() => {
			window.addEventListener("resize", updateWidthElements);
			return () => {
				window.removeEventListener("resize", updateWidthElements)
			};
		})

		return (
			<div className="i_h_menu_react">
				{items.map((item, index) =>
					<div className="i_h_menu_block" key={index}>
						<a href={item.SECTION_PAGE_URL} className="i_h_menu_link" onClick={(e) => setChild(item.ID, e)}>
							<span>{item.NAME}</span>
						</a>
						{item.I_CHILD && showChild == item.ID &&
							<MenuChild items={Object.values(item.I_CHILD)} />
						}
					</div>
				)}
			</div>
		)
	}

	function MenuChild(props) {
		return (
			<div className="i_h_menu_child">
				{props.items.map((item, index) =>
					<div className="i_h_menu_block" key={index}>
						<a href={item.SECTION_PAGE_URL} className="i_h_menu_link">
							<span>{item.NAME}</span>
						</a>
						{item.I_CHILD &&
							<MenuChild items={Object.values(item.I_CHILD)} />
						}
					</div>
				)}
			</div>
		)
	}

	ReactDOM.render(<Menu />, menu_div);

Comments

[davidnum95]

Почему не рендерится компоннент после перезаписи массива?

Потому что ты ломаешь виртуал дом реакта своими ручными манипуляциями с элементами. Перепиши по нормально, без всяких $ и document.querySelector.

Answer 1

[McHack]

Проблема решена. Оказалось не правильно передавал массив для перезаписи в переменную.

У меня сработал следующий код:

let elements = [...items]

//DO SOMETHING

setItems(elements)

// Добавление элемента в массив (с методом push у меня не работает)

setItems([...elements, exampleArray])

Answer 2

[antishock]

По идее должно решить проблему
useEffect(updateWidthElements, [items])

Comments

[McHack]

пробовал так, но сейчас еще раз попробовал на всякий случай. Проблему не решило