需要循环直到数组里面的数组有值答案

【问题标题】：Need to loop till the array inside the array has value需要循环直到数组里面的数组有值
【发布时间】：2021-03-15 17:08:01
【问题描述】：

我需要循环（映射）数组直到数组内部有值。如果内部数组为空需要停止循环

var parent = {
  children: [
    {
      id: '1',
      title: 'test1',
      children: [
        {
          id: '2',
          title: 'test 21',
          children: [
            {
              id: '3',
              title: 'test3',
              children: [
                {
                  id: '4',
                  title: 'test5',
                  children: []
                }
              ]
            }
          ]
        }
      ]
    }
  ]
};

循环数组直到子数组内部有值。

【问题讨论】：

你想做什么？
我必须显示所有子数组中的标题名称。通过检查子数组是否有数组。
但是你想要完成什么？有预期的结果吗？
只是我需要循环数组来显示所有孩子的标题。
但是你的结构是完全不同的，它是一个对象，它有一个属性作为子对象，它是一个对象数组，因为根据你的问题，子对象的值将是空数组，因为相同的属性会被覆盖

标签： javascript jquery reactjs typescript

【解决方案1】：

您可以递归循环遍历子数组并将标题推送到另一个数组。然后可以循环遍历这个新数组来渲染标题。

export default function App() {
  const titleArray = []

  const recursive = (children) => {
    children.map((newChild) => {
      newChild.title && titleArray.push(newChild.title)
      if(newChild.children) {
        recursive(newChild.children)
      }
    })
  }
  recursive(parent.children)
  return (
    <div className="App">
      {titleArray.map((title, index) => (
         <div key={index}>{title}</div>
      ))}
    </div>
  );
}

沙盒网址：https://codesandbox.io/s/naughty-archimedes-0hzy2?file=/src/App.js:668-1111

【讨论】：

【解决方案2】：

检查这个。

import React, { Fragment } from "react";

const App = () => {
  let parent = {
    children: [
      {
        id: "49",
        title: "test1",
        type: "domain_content_root",
        children: [
          {
            id: "71",
            title: "test 21",
            type: "content_folder",
            children: [
              {
                id: "71",
                title: "test3",
                type: "content_folder",
                children: [
                  {
                    id: "71",
                    title: "test5",
                    type: "content_folder",
                    children: []
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  };

  let getValues = (object) => {
    return object && typeof object === "object"
      ? [
          ...("title" in object ? [object.title] : []),
          ...Object.values(object).flatMap(getValues)
        ]
      : [];
  };

  return (
    <Fragment>
      {getValues(parent.children).map((title) => (
        <div>{title}</div>
      ))}
    </Fragment>
  );
};

export default App;

工作codesandbox

【讨论】：

您现在可以查看编辑后的数组吗？我的数组格式是这样的。
@Kavitha 我已经更新了，请检查一下，有些忙于其他事情，让我知道它是否对你有帮助