如何在 react-native 中对 SectionList 进行分页

Posted 2023-02-16

【中文标题】如何在 react-native 中对 SectionList 进行分页

【英文标题】：How to paginate a SectionList in react-native

【发布时间】：2021-10-08 15:24:06

【问题描述】：

我有一个对象数组，每个对象都包含一个部分和一个数据；

const arr = [
   section: "a", data: [1, 2] ,
   section: "b", data: [3, 4, 5, 6] ,
   section: "c", data: [7, 8, 9, 10, 11, 12, 13] 
];

现在我想给它分页。 我需要在一页中显示 4 个项目。

所以它会是这样的：

[
  page: 1, section: ['a', 'b'], data: [1, 2, 3, 4]
  page: 2, section: ['b', 'c'], data: [5, 6, 7, 8]
  page: 3, section: ['c'], data: [9, 10, 11, 12]
  page: 4, section: ['c'], data: [13]
]

求救，试了很多方法还是解决不了。

我的努力

const arr = [
   title: "a", data: [1, 2] ,
   title: "b", data: [3, 4, 5, 6] ,
   title: "c", data: [7, 8, 9, 10, 11, 12, 13] 
];

let c = 0, na = [], ha = [];

for(let i = 0; i < arr.length; i++)
  let ia = arr[i].data;
  for(let k = 0; k < ia.length; k++)
    na = [...na, [ arr[i].title, ia[k] ]];
    // na = [...na, [c]: section: arr[i].title, data: ia[k]]; c++;
  


// console.log(JSON.stringify(na));
function chunk (arr, len) 

  var chunks = [], i = 0, n = arr.length;

  while (i < n) 
    chunks.push(arr.slice(i, i += len));
  

  return chunks;


const resCh = chunk(na, 3);
console.log(resCh);

let finalArr = [];
for(let i = 0; i< resCh.length; i++)
  
  let nstd = resCh[i], finalObj = ;
  
  nstd.reduce( (t, s) => 
      
      if(t[0] === s[0]) 
        if(finalObj[t[0]])
          
          finalObj = 
            ...finalObj,
            [t[0]]: [
              ...finalObj[t[0]],
              t[1], s[1]
            ]
          
          
        else 
          
          finalObj = 
            ...finalObj,
            [t[0]]: [t[1], s[1]]
          
          
        
        
      else 
        if(finalObj[t[0]])
          finalObj = 
            ...finalObj,
            [t[0]]: [
              ...finalObj[t[0]],
              t[1]
            ]
          
        else 
          finalObj = 
            ...finalObj,
            [t[0]]: [ t[1] ]
          
        
      
      
      return s;
  );
  
  finalArr.push(finalObj);


console.log(finalArr);

【问题讨论】：

您尝试了什么，出了什么问题？

@SinanYaman 我加了努力

【参考方案1】：

你可以这样做：

const arr = [
   section: "a", data: [1, 2] ,
   section: "b", data: [3, 4, 5, 6] ,
   section: "c", data: [7, 8, 9, 10, 11, 12, 13] 
];

const fillRange = (start, end) => 
  return Array(end - start + 1).fill().map((item, index) => start + index);
;

let result = [];
let j = 0
let maxData = Math.max(...arr.map(x => x.data).flat(2))

for (let i = 0; i < 4; i++) 
   if (j === 0) j = i + 1;
   else j = j + 4;
   const finalData = fillRange(j, j + 3).filter(x => x <= maxData);
   let section = [];
   arr.forEach(val => 
      if(val.data.some(v => finalData.includes(v))) section.push(val.section);
   );
   let resObj = page: i + 1, section: section, data: finalData
   result.push(resObj)

console.log(result)

解释：

使用 fillRange 函数，我创建了 4 x 4 的连续数字数组（如 [1,2,3,4][5,6,7,8]...）。这些值的上限 = 在所有 data 数组中找到的最大值 (fillRange(j, j + 3).filter(x => x <= maxData))； 找到data 包含这些数字的section； 使用之前找到的所有数据创建结果对象并将其推送到result 数组中。

【讨论】：

谢谢。我找到了一条更短的路。但这仍然不能解决我的问题。