antd-mobile ListView怎么用？

Question

问题描述

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

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

我看了 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>
        );
    }
}

Answer 1

dataSource =[{
filename: 'xxx'
}]

类似

Answer 2

参考了一下别人的代码，dataSource 应该这样用。

constructor(props){
    super(props);

    const dataSource = new ListView.DataSource({
        rowHasChanged: (row1, row2) => row1 !== row2,
    });      

    this.state = {
        dataSource: dataSource.cloneWithRows({}),
        isLoading: true
    };
}

//修改 state
changeState = (list) => {
    this.setState({
        dataSource: this.state.dataSource.cloneWithRows(list),
        isLoading: false
    });
}

componentDidMount() {
    this.changeState(this.props.list); //this.props.list 是实际数据
}

今天我又看了一下官网的例子，body 容器的代码比自定义的更简单，没有 Sections，更容易理解。