React中使用递归函数提取嵌套数组对象的name参数至新数组

问题背景 #

我需要从嵌套数组的每个对象中提取name属性，整理成单独数组并在React页面中展示。现有嵌套数组及递归尝试代码如下：

嵌套数组 #

const dummyArray = [{
    name: "hello2",
    test: [{
        name: "hello3"
    }]
},
{
    name: "hello4",
    test: [{
        name: "hello5",
        test: [{
            name: "hello6"
        }]
    }]
}
];

现有递归代码 #

const stateRef = React.useRef([]);

function recursive(arr) {
console.log("arr", arr);

if (arr && arr.length > 0) {
  for (let i = 0; i < arr.length; i++) {
    let obj = arr[i] || null;
    if (obj?.name) {
      stateRef.current.push(obj.name);
    }

    if (obj?.test) {
      recursive(obj.test);
    }
  }
} else {
  return;
}
}

优化方案 #

原代码依赖useRef存储结果，会导致组件无法响应状态更新。以下是更合理的实现方式：

纯递归提取函数 #

让递归函数直接返回收集到的name数组，避免外部依赖：

function extractNames(arr) {
  let names = [];
  if (!arr || arr.length === 0) return names;

  for (const obj of arr) {
    // 收集当前对象的name
    obj?.name && names.push(obj.name);
    // 递归处理嵌套的test数组，合并结果
    obj?.test && (names = names.concat(extractNames(obj.test)));
  }
  return names;
}

在React组件中应用 #

使用useState存储结果，确保页面能响应式渲染：

import React, { useState, useEffect } from 'react';

const dummyArray = [{/* 你的嵌套数组 */}];

function App() {
  const [names, setNames] = useState([]);

  useEffect(() => {
    // 提取并更新状态
    setNames(extractNames(dummyArray));
  }, []);

  return (
    <div className="App">
      <h1>提取的Name列表</h1>
      <ul>
        {names.map((name, idx) => (
          <li key={idx}>{name}</li>
        ))}
      </ul>
    </div>
  );
}

// 定义提取函数
function extractNames(arr) {
  let names = [];
  if (!arr || arr.length === 0) return names;

  for (const obj of arr) {
    obj?.name && names.push(obj.name);
    obj?.test && (names = names.concat(extractNames(obj.test)));
  }
  return names;
}

export default App;

核心改进点 #

1. 递归函数改为纯函数，不依赖外部变量，逻辑更清晰且可复用
2. 使用useState替代useRef，确保状态更新后组件重新渲染，页面展示最新数据
3. 简化代码逻辑，用for...of循环替代传统for循环，可读性更强

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