问题描述

我想用长列表，但是渲染不出数据，所需数据我已经拿到了。

问题出现的环境背景及自己尝试过哪些方法

我看了 ant design mobile 官网的代码示例，主要是 dataSource 不明白，给出的说明链接不对，感觉问题可能是出在这里。

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

class Songs extends Component {
    constructor(props){
        super(props);

        const getRowData = (dataBlob, sectionID, rowID) => dataBlob[rowID];

        const dataSource = new ListView.DataSource({
            getRowData,
            // getSectionHeaderData: getSectionData,
            rowHasChanged: (row1, row2) => row1 !== row2
            // sectionHeaderHasChanged: (s1, s2) => s1 !== s2,
        });

        this.state = {
            dataSource
        };
    }

    render() {
        let {list} = this.props;

        console.log(list);
        
        let index = list.length - 1;

        const row = (rowData, sectionID, rowID) => {
            if (index < 0) {
                //没有歌曲
                index = list.length - 1;
            }

            const obj = list[index--];

            return (
                <div key={rowID} className="songs-row">{obj.filename}</div>
            );
        };

        return (
            <WingBlank size="sm">
                <ListView
                    ref={el => this.lv = el}
                    dataSource={this.state.dataSource}
                    /*renderFooter={() => (<div style={{ padding: 30, textAlign: 'center' }}>
                    {this.state.isLoading ? 'Loading...' : 'Loaded'}
                    </div>)}*/
                    renderRow={row}
                    className="songs-list"
                    pageSize={30}
                    scrollRenderAheadDistance={500}
                    style={{height: '400px'}}
                />
            </WingBlank>
        );
    }
}