Почему не работает QuerySelector в React?

Question

[HitGirl]

Здравствуйте!
Пытаюсь получить и вывести элементы используя querySelector, но ничего не выводится (массив elements всегда пустой), хотя в консоли данные отображаются. Подскажите, пожалуйста, где у меня ошибка?

const RightBar:FC = ()=>{
    const [elements,setElements] = useState<any[]>([])

    useEffect(()=>{
        console.log(document.querySelectorAll(":not(iframe) > h2 > a"))
        setElements([...document.querySelectorAll(":not(iframe) > h2 > a")])
    },[])
    return (
        <div className={classes.right}>
            <p className={classes.main}>On this page</p>
            <ul>
                {elements.forEach((el:any)=>{
                    const href = el.href.split("#")[1]
                    return (
                        <li><a href={el.href}>{el.text}</a></li>
                    )
                })}
                </ul>
        </div>
    )
}

Comments

[Александр]

Вероятно, ваш код выполняется до того, как документ готов к работе.
По этому querySelectorAll не может найти элементы, которые вы ищете.

Попробуйте использовать useEffect и document.readyState

Например:

const RightBar:FC = ()=>{
    const [elements,setElements] = useState<any[]>([])

    useEffect(()=>{
        if(document.readyState === "complete") {
            const elements = Array.from(document.querySelectorAll(":not(iframe) > h2 > a"))
            setElements(elements)
        }
    },[])
    return (
        <div className={classes.right}>
            <p className={classes.main}>On this page</p>
            <ul>
                {elements.map((el:any,i)=>{
                    const href = el.href.split("#")[1]
                    return (
                        <li key={i}><a href={el.href}>{el.text}</a></li>
                    )
                })}
                </ul>
        </div>
    )
}

[HitGirl]

Александр, перепутал forEach с map. Работает и без readyState.