The official usage (custom container) https://mobile.ant.design/components/list-view-cn/#components-list-view-demo-basic-stickyCopy the code

The official methods seem to work well at first glance, but some unexpected problems arise when data are put on the table. I know

SectionIDs, rowIDs, dataBlobs, and rowIDs are used to create sectionIDs, rowIDs, and dataBlobs. How does that correspond?

This explanation corresponds to 1:

Change NUM_SECTIONS to the number of data sections you also get per page, I get 10 per page and I change 5 to 10, if 10 is enough for you to fill a page then change NUM_ROWS_PER_SECTION to 1, I get enough for a page and I change 1, After this, we don't need to worry about automatic key generation. We just need to integrate the data. See 2 for how to integrate the dataCopy the code

1. The following is the official usage method and how to change the configuration:

const NUM_SECTIONS = 5; // Number of columns per page const NUM_ROWS_PER_SECTION = 5; If the first load is less than one page then the pull-down will not trigger loading data. let pageIndex = 0; const dataBlobs = {}; let sectionIDs = []; let rowIDs = []; function genData(pIndex = 0) { for (let i = 0; i < NUM_SECTIONS; i++) { const ii = (pIndex * NUM_SECTIONS) + i; const sectionName = `Section ${ii}`; sectionIDs.push(sectionName); dataBlobs[sectionName] = sectionName; rowIDs[ii] = []; for (let jj = 0; jj < NUM_ROWS_PER_SECTION; jj++) { const rowName = `S${ii}, R${jj}`; rowIDs[ii].push(rowName); dataBlobs[rowName] = rowName; } } sectionIDs = [...sectionIDs]; rowIDs = [...rowIDs]; }Copy the code

2. I changed the official class component to the hooks component

const [dataSourceAll, setdataSourceAll] = useState([]); // Store the most recently acquired data for later determination of whether to continue to request data. Const [dataSourcenew, setdataSourcenew] = useState([]); // Merge old data with new data. Const getList=()=>{let dataSources=[] // setdataSourceAll(); DataSourcenew ([...dataSourcenew,...dataSources]) // Merge the new data with the original data. } useEffect(()=>{getList() // get data},[]) const onEndReached = async (event) =>{ If the last page is not proved, the data is not fetched. If (datasourceall.length > 0) {getList(); if (datasourceall.length > 0) {getList() setdataSource(dataSource.cloneWithRowsAndSections(dataBlobs, sectionIDs, RowIDs) // call the method that adds the key (genData) // Call the getData method first, but because of asynchracy we need to call the genData method later. genData(++pageIndex); }}Copy the code

Okay, so now that we have the data sorted out how do we render it?

The data in the official website is the static data simulated in the official website. We only need to replace the static data with the data after our own integration (data refers to the static data in the official website). Since we have aggregated data with setdataSourcenew([…dataSourcenew,…dataSources]) in 2, we can now replace data with dataSourcenew.

//官网 : let index = data.length - 1; // let index = dataSourcenew. Length - 1; Const row = (rowData, sectionID, rowID) => {if (index < 0) {// official: index = data.length - 1; // index = dataSourcenew. Length - 1; } //官网 : const obj = data[index--]; // const obj = dataSourcenew[index--]; return ( <div key={rowID} style={{ padding: '0 15px' }}> <div style={{ lineHeight: '50px', color: '#888', fontSize: 18, borderBottom: '1px solid #F6F6F6', }} >{obj.title}</div> <div style={{ display: '-webkit-box', display: 'flex', padding: '15px 0' }}> <img style={{ height: '64px', marginRight: '15px' }} src={obj.img} alt="" /> <div style={{ lineHeight: 1 }}> <div style={{ marginBottom: '8px', fontWeight: 'bold' }}>{obj.des}</div> <div><span style={{ fontSize: '30px', color: '# FF6E27'}} > < / span > 35 selections {rowID} < / div > < / div > < / div > < / div >). };Copy the code

We have rendered the data into the DOM, but must be the same appears if we switch pages, because we defined the initial values externally

let pageIndex = 0;
const dataBlobs = {};
let sectionIDs = [];
let rowIDs = [];
Copy the code

We just need to reset the four initializers. Here is how the hooks reset the initializers manually

UseEffect (() => {// Manually reset the field to prevent rendering key errors when entering the page twice. return () => { page = 0; pageIndex = 0; sectionIDs = []; rowIDs = []; }}, [])Copy the code