请问，react中页面渲染完成的是哪个生命周期呢？-灵析社区
我爱了你呢请问，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。 请问这个应该如何进行避免呢？ === 完整代码如下： subContainer.tsx import React, { useEffect, useState } from 'react' import { ChangeEvent } from'react'; export type ItemType = { type: "property" | "method", value: string, selected?: boolean } export type SubContainerProps = { height?: number, title: string, data: ItemType[], // 这个是items scrollToIdx?: number // 滚动到具体的index的data数组元素 selected?: boolean // class是否被选中 } export default function SubContainer (props: SubContainerProps){ const [data, setData] = useState([]) // 滚动 useEffect(() => { if(props.scrollToIdx) { const scrollToIdx = props.scrollToIdx console.log("滚动ID：", '#item-' + scrollToIdx!.toString()) scrollTo(scrollToIdx) } }, [props.scrollToIdx]) const scrollTo = (scrollToIdx: number) => { const container = document.querySelector("#container") const div: HTMLDivElement | null = document.querySelector('#item-' + scrollToIdx!.toString()) console.log(container, div) if(container) { container.scrollTo({ top: div!.offsetTop, behavior: 'smooth' }); } } useEffect(() => { setData(props.data) }, [props.data]) const itemClick = (item: ItemType, index: number) => { console.log(item, index) } const searchChange = (e: ChangeEvent) => { //console.log(e.target.value) const searchValue = e.target.value; const filteredData = props.data.filter(item => { // 假设您要匹配 item 的某个属性，比如 value return item.value.toLowerCase().includes(searchValue.toLowerCase()); }); // 在这里根据 filteredData 进行后续的处理，比如更新组件状态或重新渲染相关部分 console.log(filteredData); setData(filteredData) } return ( {props.title} {data.map((item, index) => ( { itemClick(item, index) }} >{item.value} ))} ) } 调用： // 创建的props //滚动位置 const [selIdx, setSelIdx] = useState(0) const props:SubContainerProps = { data: [ { type: 'property', value: 'firstName' }, { type: 'property', value: 'lastName' }, { type: 'property', value: 'firstName' }, { type: 'property', value: 'lastName' }, { type: 'property', value: 'firstName' }, { type: 'property', value: 'lastName' }, { type: 'property', value: 'firstName' }, { type: 'property', value: 'lastName' }, { type: 'property', value: 'firstName' }, { type: 'property', value: 'lastName' }, { type: 'property', value: 'firstName' }, { type: 'property', value: 'lastName' }, { type: 'property', value: 'firstName' }, { type: 'property', value: 'lastName' }, { type: 'property', value: 'firstName' }, { type: 'property', value: 'lastName' }, { type: 'property', value: 'firstName' }, { type: 'property', value: 'lastName' }, { type: 'property', value: 'firstName' }, { type: 'property', value: 'lastName' }, { type: 'method', value: 'getFullname', selected: true }, ], height: 120, title: 'classA', selected: true, scrollToIdx: selIdx }
momo