在React中向容器顶部添加内容时如何保持滚动位置

Question

我正在尝试创建通讯应用程序。 无论何时滚动条位于顶部，它都会分派动作以获取较旧的消息，但是即使在获取消息之后，滚动条仍会停留在顶部，因此它会继续触发分派动作以获取更多消息。有没有人知道在将内容添加到父容器的子项顶部时如何保持滚动位置，以使滚动位置不会停留在顶部并停止触发请求。

<Fragment>
{messagesLoading && messages.length > 0 && <NoramlSpinner/>}
                    <li id='first' ref={lastPostElRef}>
                        <div className='mb-1 left-msg' >
                        </div>
                    </li>
                {messages.length > 0 &&
                    messages.map((message, i)=>{
                    if(profile.user._id !== message.sender._id ){

                        return <LeftMessage  message={message} key={message._id}/>
                    }
                    else{
                        return <RightMessages  message={message} key={message._id}/>

                    }

                })}    
</Fragment>