如何基于索引多次分割数组？React状态更新实现求助

核心思路是基于原始数组的分割点集合来动态生成分组：每次传入索引时，将其加入分割点集合（去重并排序），再根据这些分割点切割原始数组，得到新的多维分组。

完整代码实现 #

import { useState } from 'react';

function App() {
  // 初始状态可以是一维数组，后续会动态更新为多维
  const [splittedPdfs, setSplittedPdfs] = useState([1,2,3,4,5]);

  const handleButtonClick = (splitIndex) => {
    // 1. 扁平化当前分组，还原为完整的原始数组
    const originalArray = splittedPdfs.flat();
    const arrayLength = originalArray.length;

    // 2. 过滤无效索引（避免分割点在数组边界外）
    if (splitIndex <= 0 || splitIndex >= arrayLength) return;

    // 3. 从当前分组中提取已有的分割点
    let existingSplitPoints = [];
    let currentOffset = 0;
    for (const group of splittedPdfs) {
      currentOffset += group.length;
      // 只记录数组中间的分割点（排除最后一组的结束位置）
      if (currentOffset < arrayLength) {
        existingSplitPoints.push(currentOffset);
      }
    }

    // 4. 合并新分割点、去重、排序
    const allSplitPoints = [...new Set([...existingSplitPoints, splitIndex])].sort((a, b) => a - b);

    // 5. 根据分割点生成新的分组
    const newGroups = [];
    let startPos = 0;
    for (const point of allSplitPoints) {
      newGroups.push(originalArray.slice(startPos, point));
      startPos = point;
    }
    // 添加最后一段
    newGroups.push(originalArray.slice(startPos));

    // 6. 更新状态
    setSplittedPdfs(newGroups);
  };

  return (
    <div>
      {/* 示例按钮，可根据实际场景动态传入index */}
      <button onClick={() => handleButtonClick(2)}>分割索引2</button>
      <button onClick={() => handleButtonClick(4)}>分割索引4</button>
      <pre>{JSON.stringify(splittedPdfs, null, 2)}</pre>
    </div>
  );
}

export default App;

逻辑说明 #

1. 扁平化还原：不管当前是一维还是多维数组，通过flat()方法都能得到完整的原始数据，确保每次分割都基于完整数组操作。
2. 无效索引过滤：跳过小于等于0或大于等于数组长度的索引，避免生成空分组。
3. 提取已有分割点：遍历当前分组，计算出已存在的分割位置（比如[[1,2],[3,4,5]]对应的分割点是2）。
4. 合并排序分割点：将新传入的索引加入集合去重，再排序保证分割顺序正确。
5. 生成新分组：根据排序后的分割点，依次切割原始数组，生成最终的多维分组。

测试验证 #

• 初始状态：[1,2,3,4,5]
• 点击「分割索引2」：状态更新为[[1,2],[3,4,5]]
• 点击「分割索引4」：状态更新为[[1,2],[3,4],[5]]

完全符合需求，且支持任意长度的初始数组和多次分割操作。

内容的提问来源于stack exchange，提问作者Rayyan Alam