React Native递归更新嵌套树checked状态时二三级节点值变更失效

异常现象 #

在React Native项目中维护带多级children嵌套的树形分类数据时，实现setChecked递归方法的目标为：根据传入的term_id匹配对应节点，切换节点的checked勾选状态。实际运行效果存在明显分层差异：

• 传入一级节点ID时，可正常切换对应节点的checked值，该层级功能完全符合预期
• 传入二级、三级等深层级节点ID时，对应节点的checked值无法触发预期的状态变更

原实现的核心问题 #

对照原有代码逻辑，深层节点更新失效的根本原因有三点：

• 递归调用结果完全未被消费：在包含children的节点分支中，代码执行了setChecked(item.children, id)，但没有接住递归返回的更新后数组，深层节点的状态变更结果完全没有被整合到上层节点的结构中
• 子节点引用未替换为最新值：构造当前层级新节点时，直接将原始的item.children旧值赋值给新节点的children属性，没有使用递归处理后的最新子节点结构，导致深层更新的内容永远无法透传
• 分支逻辑冗余：原代码将有children、无children的节点拆成两个分支处理，两个分支的checked判断逻辑完全一致，既增加了代码重复，也容易在不同分支遗漏递归逻辑的处理

这也是一级节点功能正常的核心原因——一级节点的checked状态判断是在顶层遍历层直接完成的，没有依赖递归返回的子节点结果，所以不受子节点引用未更新的逻辑影响。

修复后的实现 #

按照不可变数据更新的原则，梳理统一节点构造逻辑，接住递归返回的最新children值，修复后的完整代码如下：

const setChecked = (data, id) => {
  return data.map((item) => {
    // 匹配到目标节点时反转checked状态，否则保留原有状态
    const isTargetNode = item.term_id === id;
    const newChecked = isTargetNode ? !item.checked : item.checked;
    // 递归处理有子节点的分支，拿到更新后的子节点数组
    const newChildren = item.children?.length 
      ? setChecked(item.children, id) 
      : [];
    // 返回全新节点对象，整合所有更新后的字段
    return {
      term_id: item.term_id,
      name: item.name,
      checked: newChecked,
      children: newChildren
    }
  });
};

修复效果验证 #

• 传入一级节点ID（如21）时，仍可正常切换对应节点的checked状态
• 传入深层节点ID（如24、25）时，递归处理的更新结果会逐层向上合并，最终返回的新树结构中，目标节点的checked状态可正常切换

注意：该实现严格遵循React Native的不可变更新要求，全程没有直接修改原数据的对象/数组引用，可直接配合setState触发组件重渲染，不会出现因引用不变导致的视图不更新问题。

内容的提问来源于stack exchange，提问作者hassan hosseini