How do I use antd-mobile ListView?

problem description

I want to use a long list, but I can"t render the data. I"ve got the data I need.

the environmental background of the problems and what methods you have tried

I read the code example on the official website of ant design mobile . The main reason is that dataSource does not understand. The link given is incorrect, and I feel that the problem may lie here.

related codes

/ / Please paste the code text below (do not replace the code with pictures)


                <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>
        );
    }
}

Antd-mobile react.js visual-studio-code javascript

Nov.11,2021

dataSource =[{
filename: 'xxx'
}]

similar

refers to someone else's code, and dataSource should be used this way.

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 
}

Today I took another look at the example on the official website. The code of the body container is simpler than the custom one, and it is easier to understand without Sections .

Previous: The method of recharging notification in the lower right corner of VS Code

Next: The reason why function () {} () reported an error is that it was reported wrong at the pre-compilation stage? Or do you report an error only when you execute ()? Ask for advice.