使用React ref回调渲染后滚动到数组中的元素

Question

我想在渲染后使用ref回调滚动到数组中的元素。 根据状态，它将基于this.state.scrollToId滚动到其他元素。 但我认为以下代码中的回调未在componentDidUpdate

之前触发

P.S。 Item是自定义组件。

我也尝试过componentDidMount。

• 已完成的研究：
• Using 'ref' as array in React
• https://reactjs.org/docs/refs-and-the-dom.html#callback-refs
• How to assign refs to multiple components

class A extends React.Component{
//... 
    state = { scrollToId: null}
    scrollToMyRef = (myRef) =>{
        window.scrollTo(0, myRef.current.offsetTop)
    }

    constructor(props) {
        super(props)
        this.itemRefs = {};
        this.setItemRef = (element, id) => {
            this.itemRefs[id] = element;
        }
    }

    componentDidUpdate(){
        if (this.state.scrollToId){
                scrollToMyRef(this.itemRefs[this.state.scrollToId])
    }
    render(){
        return (
            <div>
                {
                    this.state.aList.map((item)=>{
                        return (
                                <Item ref={(element) => {this. setItemRef(element, item.id)}}
                                </Item>
                        )

                    })
                }
            </div>)
     }
}

• 预期：根据状态，页面将滚动到相应的元素
• 实际：itemRef[id]未定义，并在scrollToMyRef上引发异常