不滚动到带有水平样式列表的“下一页”上列表的开头

Question

我在div中显示了一个列表，您可以滚动浏览并查看5个表。它们在水平方向上彼此左右对齐。

到达最后一张桌子后，您会看到一个“下一个”箭头。这是从mongo DB提取接下来的5个元素的分页的一部分。

示例设置：

<div className="previousOrderWrapper">
   {this.prevPage()}
   {tables}
   {this.nextPage()}
</div>

nextPage（）：

nextPage = () => {
    var newPage = this.state.pageNumber;
    newPage++;
    if (this.state.previousOrders.length < 5) {
        return (
            <div className="nextBtn">
                <button className="shaded"> <img src={arrow}/></button>
            </div>
        )
    } else {
        return (
            <div className="nextBtn">
                <button onClick={(e)=>{this.fetchData(newPage)}}><img src={arrow}/></button>
            </div>
        )
    }
}

fetchData（）：

fetchData = (newPage) => {
    axios.get('/api/orders/' + this.props.customer.name + '/' + this.props.customer.phone + '/' + newPage * 5)
    .then((res) => {
        this.setState({
            previousOrders : res.data,
            pageNumber : newPage,
        });
    }) 
}

fetchData对下一批数据执行API调用。发生的情况是更改了PreviousOrderWrapper中的tables数据，但是水平滚动条仍位于列表的末尾，在加载新数据时它应滚动到最左侧。

下面是一张可以更好地描述问题的图片：

（单击下一步，重新加载内容，但滚动条仍在末尾。需要滚动到“下一个”的最左侧）

我已经尝试过诸如react-scrollchor或this.myRef之类的事情，但是我什么都无法工作。

我如何通过nextPage（）下的onClick强制包装器向左滚动？