javascript - 请问，react中页面渲染完成的是哪个生命周期呢？

Question

请问，react中渲染完成的是哪个生命周期呢？
我认为是：componentDidMount

  useEffect(() => {
    console.log('mounted') // 挂载后
  }, [])

可以当我在这个生命周期内，document.querySelector查询id的时候：却报错

    useEffect(() => {
        if(props.scrollToIdx) {

            const scrollToIdx = props.scrollToIdx 
            
            console.log("滚动ID：", '#item-' + scrollToIdx!.toString())

            const container = document.querySelector("#container")
            const div: HTMLDivElement | null = document.querySelector('#item-' + scrollToIdx!.toString()) // 这里查询出是null
        
            console.log(container, div)
            if(container) {
                container.scrollTo({
                    top: div!.offsetTop,
                    behavior: 'smooth'
                });
            }
        }

    }, [])

报错信息:

Cannot read properties of null (reading 'offsetTop')
TypeError: Cannot read properties of null (reading 'offsetTop')
    at 

也就是说，没有查询出#item-20，原因是还没有渲染到DOM。

请问这个应该如何进行避免呢？

Answer 1

是不是#item-20异步从接口中获取的，如果是非同步获取的话，在页面首次完成渲染的时候useEffect(,[])，获取不到#item-20是符合预期的