如何在数组的每个对象中只获取一个参数，并使用JavaScript和React钩子中的递归函数将它们存储在一个单独的数组中

Question

我有一个如下的嵌套数组，我需要存储"name"；参数在一个单独的数组中的每个对象中，并将它们显示在页面上

嵌套数组：

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

这是我试图以递归方式完成任务的函数，我在React中使用useRef来存储最终值。

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[i]);
} else {
// what would be the logic here
}
}
} else {
return;
}
}

总体代码在此代码沙盒链接中整体代码

有人能帮我修改递归函数以动态地获得所需的值吗。

谢谢。

Answer 1

您可以使用以下递归函数作为：

CODESANDBOX LINK FOR REACT CODE

const result = [];
function recursive(obj) {
if (!obj) return;
if (Array.isArray(obj)) {
for (let o of obj) {
if (o.name) result.push(o.name);
recursive(o.test);
}
}
}
const dummyArray = [
{ name: 'hello2', test: [{ name: 'hello3' }] },
{
name: 'hello4',
test: [
{
name: 'hello5',
test: [{ name: 'hello6' }],
},
],
},
];
recursive(dummyArray);
console.log(result);

Answer 2

您的问题是将obj.test[i]传递给递归调用，但实际上您想传递obj.test，这是您试图递归的数组：

recursive(obj.test);

const dummyArray = [{ name: "hello2", test: [{ name: "hello3" }] }, { name: "hello4", test: [{ name: "hello5", test: [{ name: "hello6" }] }] } ];
const stateRef = {current: []}; // example
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;
}
}
recursive(dummyArray);
console.log(stateRef.current);

对于另一种方法，我建议将.flatMap()与嵌套递归调用一起使用。.flatMap()和扩展语法...将把所有嵌套的映射数组合并为一个更大的结果数组：

const dummyArray = [{ name: "hello2", test: [{ name: "hello3" }] }, { name: "hello4", test: [{ name: "hello5", test: [{ name: "hello6" }] }] } ];
const recursive = (arr = []) => {
return arr.flatMap(obj => [obj.name, ...recursive(obj.test)]);
}
console.log(recursive(dummyArray));
// React usage for your ref would be:
// stateRef.current = recursive(dummyArray);

不从递归函数中修改ref并保持其纯净的优点是，您可以多次调用它，而无需担心修改ref。只有将返回的数组分配给ref后，它才会更新。