Ant Design Mobile listview长列表的坑

按照官网的配置，datasource一直只显示几个，不会把以前的datasource数组合并在一起,官网传送门

import {PullToRefresh, ListView, Button, Toast} from 'antd-mobile';
import React from "react";
import ReactDOM from "react-dom";
import 'antd-mobile/dist/antd-mobile.css';
import {config} from 'utils/config'
export default class extends React.Component {
    constructor(props) {
        super(props);
        const dataSource = new ListView.DataSource({
            rowHasChanged: (row1, row2) => row1 !== row2,
        });
        this.state = {
            dataSource,
            datas:[],
            pageIndex:1,
            refreshing: true,
            isLoading: true,
            useBodyScroll: false,
            dataBlobs: {},
            sectionIDs:[],
            rowIDs:[],
            dataArr:[],//关键代码
        };
    }
    genData(ref=false) {
        //获取数据
        let that=this;
        let notid='';
        fetch(config.gethonedata(1)+'?page='+(that.state.pageIndex),{
            method:'get',
            dataType:'json',
        }).then(response=>response.json()).then(function (res){
            if(parseInt(res.st)===1)
            {
                const lg = res.data.length;
                if(lg<=0){
                    Toast.info('没有数据了~',1);
                    return false;
                }
                let dataArr = that.state.dataArr;//关键代码
                let m=that.state.datas;
                for (let i = 0; i < lg; i++) {
                    //每一次读取的数据都进行保存一次
                    dataArr.push(`row - ${(that.state.pageIndex * lg) + i}`);
                    m.push(res.data[i])
                }
                if(ref){
                    //这里表示刷新使用
                    that.setState({
                        datas:res.data,
                        pageIndex:that.state.pageIndex+1,
                        dataSource: that.state.dataSource.cloneWithRows(dataArr),
                        refreshing: false,
                        isLoading: false,
                        //保存数据进state
                        dataArr:dataArr
                    });
                }else{
                    //这里表示上拉加载更多
                    that.rData = { ...that.rData, ...dataArr };
                    that.setState({
                        datas:m,
                        pageIndex:that.state.pageIndex+1,
                        dataSource: that.state.dataSource.cloneWithRows(that.rData),
                        refreshing: false,
                        isLoading: false,
                        //保存数据进state
                        dataArr:dataArr
                    });
                }
            }else {
                Toast.info(res.msg,1);
            }
        });
    }
    componentDidUpdate() {
    }

    componentDidMount() {
        this.genData(true);
    }
    onRefresh = () => {
        let that=this;
        this.setState({ refreshing: true, isLoading: true,pageIndex:1 });
        setTimeout(() => {
            that.genData(true);
        }, 2000);
    };
    onEndReached = (event) => {
        if (this.state.isLoading && !this.state.hasMore) {
            return;
        }
        this.setState({ isLoading: true,pageIndex:this.state.pageIndex+1 });
        let that=this;
        setTimeout(() => {
            that.genData(false);
        }, 1000);
    };
    //这下面的代码跟官网没啥区别，唯一不同的是把外部定义的数据都保存进了state
    render() {
        const separator = (sectionID, rowID) => (
            

        );
        let index = this.state.datas.length - 1;
        const row = (rowData, sectionID, rowID) => {
            if (index < 0) {
                index = this.state.datas.length - 1;
            }
            const obj = this.state.datas[index--];
            return (
                

                    

                        {obj.title}
                    
                    

                        
                        

                            
{rowID} 元/任务
                        
                    
                
            );
        };
        return (

             this.lv = el}
                dataSource={this.state.dataSource}
                renderFooter={() => (

                    {this.state.isLoading ? 'Loading...' : 'Loaded'}
                
)}
                renderRow={row}
                renderSeparator={separator}
                useBodyScroll
                style={this.state.useBodyScroll ? {} : {
                    border: '1px solid #ddd',
                    margin: '5px 0',
                }}
                pullToRefresh={}
                onEndReachedThreshold={1000}
                onEndReached={this.onEndReached}
                pageSize={5}
            />
        
);
    }
}