基于Screen值为拖拽列表添加分隔符的前端数据处理问题

核心逻辑就是遍历后端返回的选中数据，逐个对比相邻元素的Screen值，一旦发现当前元素和前一个的Screen不一致，就在中间插入指定的分隔符对象。直接上代码实现：

// 可以用uuid生成唯一id，也可以自己写简单的随机逻辑
const generateRandomId = () => `divider-${Math.random().toString(36).slice(2, 10)}`;

const allAttributesHandler = (selectedData) => {
  if (!selectedData || selectedData.length === 0) return [];

  const processedList = [];
  let prevScreen = selectedData[0].Screen;
  // 先加入第一个元素
  processedList.push(selectedData[0]);

  for (let i = 1; i < selectedData.length; i++) {
    const currentItem = selectedData[i];
    // 对比当前元素与前一个的Screen值
    if (currentItem.Screen !== prevScreen) {
      // 插入分隔符对象
      processedList.push({
        id: generateRandomId(),
        type: 'divider'
      });
      // 更新前一个Screen标记
      prevScreen = currentItem.Screen;
    }
    // 加入当前元素
    processedList.push(currentItem);
  }

  // 将处理后的数组更新到右侧列状态，比如 setRightColumn(processedList)
  return processedList;
};

关键细节说明： #

• 随机ID生成：如果不想引入额外依赖，用Math.random()拼接字符串就能生成足够唯一的ID，满足组件渲染需求
• 空数据处理：开头先判断传入的selectedData是否为空，避免数组越界报错
• 分隔符位置控制：只会在不同Screen值的元素之间插入分隔符，不会出现在列表首尾，和拖拽时的操作逻辑保持一致

你可以在组件挂载（比如useEffect钩子中）或者获取到后端返回数据后，调用这个函数处理数据，再把结果更新到右侧列的状态里，这样组件重新挂载时分隔符就会自动恢复了。

内容的提问来源于stack exchange，提问作者Halit Uzan