React递归遍历嵌套对象返回值异常问题求助

你的问题核心在于递归过程中没有正确收集和返回遍历结果，导致对象类型的分支返回undefined。我们来一步步拆解问题并修复：

问题分析 #

你当前的递归函数存在两个关键问题：

1. 当处理对象类型的item时，你用Object.keys(item).map(...)调用递归，但没有将map返回的结果（数组）收集并返回，所以这个分支没有有效返回值，自然得到undefined。
2. 调用方式用Object.keys(data).map(key => console.log(this.recursion(...)))，但递归函数在处理对象时没有返回结果，导致打印出undefined，而值的分支返回的对象也没有被统一收集。

另外，这里的递归是同步操作，async/await完全派不上用场——它是用来处理异步任务的，所以用它解决不了这个问题。

解决方案：用数组统一收集结果 #

我们可以修改递归逻辑，维护一个结果数组，遇到深层值时就将其与路径存入数组，遇到对象时继续递归遍历：

// 定义获取所有深层值与路径的函数
const getDeepKeyValuePairs = (data) => {
  const result = [];

  // 内部递归函数
  const recursion = (item, currentPath) => {
    // 判断是否为非null的对象（排除null，因为typeof null也是'object'）
    if (typeof item === 'object' && item !== null) {
      Object.keys(item).forEach(key => {
        // 拼接新路径：如果是根节点就直接用key，否则拼接上之前的路径
        const newPath = currentPath ? `${currentPath}.${key}` : key;
        recursion(item[key], newPath);
      });
    } else {
      // 遇到非对象值，存入结果数组
      result.push({ value: item, path: currentPath });
    }
  };

  // 启动递归，初始路径为空字符串
  recursion(data, '');
  return result;
};

// 你的测试数据
const data = {
  "id": 8743077530231325861,
  "name": "Name of XYZ",
  "key X": 0,
  "key Y": {
    "details": {
      "value": { "up": 5, "down": 3 },
      "path": "xyz"
    },
    "key Z": { "value": 1, "path": "abc" }
  },
  "createdTimestamp": 1554446703000
};

// 使用函数并输出结果
const deepPairs = getDeepKeyValuePairs(data);
deepPairs.forEach(pair => {
  console.log(`${pair.value}, "${pair.path}"`);
});

运行结果 #

执行后你会得到想要的输出：

8743077530231325861, "id"
Name of XYZ, "name"
0, "key X"
5, "key Y.details.value.up"
3, "key Y.details.value.down"
xyz, "key Y.details.path"
1, "key Y.key Z.value"
abc, "key Y.key Z.path"
1554446703000, "createdTimestamp"

为什么这样可行？ #

• 我们用一个外部数组result来统一收集所有深层值和对应的路径，避免了递归过程中返回零散结果的问题。
• 递归函数专注于遍历逻辑：遇到对象就继续深入，遇到非对象值就存入结果，逻辑清晰且没有返回值的歧义。
• 初始调用时从整个数据对象开始，不需要手动遍历根节点的键，简化了调用流程。

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