React递归查找树节点返回父节点而非目标子节点的问题排查

核心问题是对Array.find()方法的判定逻辑理解有误：

• Array.find()的回调函数只需要返回布尔类型的判定结果，告诉方法当前遍历的元素是否为匹配项：回调返回真值就会直接返回当前遍历的元素，返回假值就继续遍历下一个元素。
• 你的代码里直接把递归查找的返回值（找到的节点对象）作为find的回调返回值，当递归在子节点中找到匹配项时，会给父节点对应的find回调返回一个非空对象，JS中非空对象转布尔值为true，find会直接判定当前遍历的父节点就是匹配项，最终返回错误的父节点。

错误执行流程复现（查找目标为name: 'Node2'时） #

1. 第一层遍历根节点数组，第一个遍历到的元素是name: 'Node1'
2. 判断Node1的name和目标值不匹配，检测到它存在子节点，执行递归调用查找子节点数组
3. 递归进入Node1的子节点数组，第一个元素就是name: 'Node2'，匹配成功，将Node2对象作为递归结果返回
4. 这个返回的Node2对象成为第一层find遍历Node1时的回调返回值，非空对象转布尔值为true，find直接判定Node1是匹配项，立刻终止遍历返回Node1，根本不会返回你递归找到的Node2。

不要在find回调里直接返回递归结果，先接收递归返回值，确认找到目标后逐层向上返回：

getSelectedNode(nodes) {
  for (const element of nodes) {
    // 当前节点匹配直接返回
    if (element.name === this.state.selectedItem) {
      return element;
    }
    // 存在子节点则递归查找
    if (element.nodes !== null) {
      const targetNode = this.getSelectedNode(element.nodes);
      // 子节点中找到目标就直接向上返回，不继续当前层遍历
      if (targetNode) {
        return targetNode;
      }
    }
  }
  // 遍历完整棵树未找到匹配项返回null
  return null;
}

注：如果一定要用find实现，也需要遵循相同逻辑：在find回调里先执行递归，用变量接住递归结果，若结果存在则手动保存后终止遍历，不要直接把递归结果作为find的回调返回值。

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