Как исправить проблему с асинхроностью?

Question

[cnstvch]

Сколько не пытался не могу сделать так чтобы log возвращал ключи chilNode. Как я понял это происходит из-за того, что когда вызывается log у меня не успевает отработать код который нарисует мне кнопки для пагинации (которые и должны быть chilNode). Пишу async и await на log и ts говорит что в этом нет смысла.

import React, { FC, useEffect, useRef, useState } from 'react'
import cl from './Pagination.module.css'

interface IPaginationProps {
	postsPerPage: number
	totalPosts: number
	paginate: Function
}

const Pagination: FC<IPaginationProps> = ({ postsPerPage, totalPosts, paginate }) => {
	const [first, setFirst] = useState(0)
	const [second, setSecond] = useState(2)
	const divRef = useRef<HTMLDivElement>(null)

	const pageNumbers = []

	for (let i = 1; i <= Math.ceil(totalPosts / postsPerPage); i++) {
		pageNumbers.push(i)
	}

	useEffect(() => {
		const sliceHandler = async (element: ChildNode) => {
			let childNodeElement = element as HTMLDivElement

			console.log(childNodeElement.getAttribute('key'));
		}
		sliceHandler(divRef.current!)
	}, [])

	return (
		<div className={cl[`pagination__conteiner`]} ref={divRef}>
			{pageNumbers.slice(first, second).map((number: number) => (
				<button className={cl[`elem`]} key={number} onClick={() => paginate(number)} >{number}</button>
			))
			}
		</div >
	)
}

export default Pagination;

Comments

[Aetae]

Судя по коду тебе нужно такое что-то:

const currentPageNumbers = useMemo(() => pageNumbers.slice(first, second), [first, second]);
useEffect(() => {
  console.log(currentPageNumbers);
}, [currentPageNumbers])

{currentPageNumbers.map((number: number) => (
  <button className={cl[`elem`]} key={number} onClick={() => paginate(number)} >{number}</button>
))}

Но нахрена - непонятно.

Answer 1

[Алексей Уколов]

Ошибка первая: вы в sliceHandler передаёте div-обёртку, а внутри функции думаете, что это какой-то его ребёнок.
Ошибка вторая: вы пытаетесь получить реактовское служебное свойство key через атрибут html-тега. Значение key даже через props нельзя получить, не говоря уже про html.

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

Comments

[cnstvch]

Смотрите в чем идея, есть два состояния который передаются в метод slice. Я хочу по нажатию на пятую кнопку менять эти состояния тем самым отображая не 1-10 а например 5 - 15 и так далее.

[Алексей Уколов]

Ничего не понял, но useEffect, ref и key явно не то, что вам нужно.