React/Next.js中为带children的嵌套JSON对象添加选中状态

步骤1：预处理选中ID集合 #

先把选中分类的ID提取到Set中，让节点选中状态的判断效率提升至O(1)：

const selectedIds = new Set(referenceSelectedCategories.map(item => item.categoryId));

步骤2：递归遍历树形结构添加checked属性 #

编写递归函数，遍历每个节点并复制原属性，同时添加checked字段，再递归处理子节点：

function addCheckedStatus(node) {
  // 复制原节点，避免修改原始数据
  const processedNode = { ...node };
  // 根据ID是否在选中集合中设置checked值
  processedNode.checked = selectedIds.has(processedNode.id) ? "true" : "false";
  // 递归处理子节点
  if (processedNode.children?.length) {
    processedNode.children = processedNode.children.map(child => addCheckedStatus(child));
  }
  return processedNode;
}

步骤3：生成目标JSON对象 #

调用函数处理从数据库获取的原始JSON：

const desiredOutputJsonObject = addCheckedStatus(jsonObject);

补充说明 #

• 该方法通过对象展开创建新节点，不会修改原始JSON数据，避免副作用
• 递归逻辑适配任意深度的树形结构，即使超过5级也能正常工作
• 使用Set存储选中ID，在选中分类数量较多时，能大幅提升判断效率

内容的提问来源于stack exchange，提问作者Chris Kuiper