如何用Vanilla JS将数组按20项拆分后存入React Hook变量

你的代码出现错误主要有以下几个核心问题：

• splice 方法的第二个参数是需要提取的元素数量，你传入了i + 20，当i不为0时提取数量会远超预期
• 每次循环都重新拷贝完整的原数组，导致每次切割都是基于完整原数组，而非剩余未切割的部分
• 循环内多次调用setSplitted会触发多次不必要的重渲染，逻辑也容易出现偏差
• 前置的return逻辑会漏掉最后不足20条的分组处理

伪代码参考 #

函数 数组分组(原数组, 单组容量):
    初始化结果数组 = []
    从索引0开始遍历原数组，每次步进长度等于单组容量:
        切取原数组 [当前索引, 当前索引 + 单组容量) 区间的片段
        将片段推入结果数组
    返回结果数组

具体实现 #

首先封装一个纯JS的数组分组工具函数，逻辑和React副作用解耦，更容易调试和复用：

// 通用数组分组函数
const chunkArray = (arr, chunkSize) => {
  const res = [];
  // slice方法天生支持结束索引超过数组长度，自动截断到末尾
  for (let i = 0; i < arr.length; i += chunkSize) {
    res.push(arr.slice(i, i + chunkSize));
  }
  return res;
}

然后在React的useEffect中直接调用即可，一次性计算完成后再赋值给state，避免多次渲染：

useEffect(() => {
  // 按每组20条拆分found数组
  const splittedArr = chunkArray(found, 20);
  setSplitted(splittedArr);
}, [found]);

这个实现对你的65长度数组场景，会自动拆分为[20项, 20项, 25项]的结构，完全符合你要求的输出效果。

内容的提问来源于stack exchange，提问作者Lorasia Andrikanych