Javascript 循环并渲染来自3层深度对象数组的数据

我正在使用来自外部源的以下数据集，其中包含一个3层深度的对象数组

常数数据=[ {姓名：莫莉，描述：[ {children:[{text:喜欢跑步}]}， {儿童：[{文本：喜欢冰淇淋}]}， {儿童：[{文本：喜欢汽车}]} ]}, {姓名：Jay，描述：[ {儿童：[{text:喜欢骑自行车}]}， {儿童：[{text:Likes cake}]}， {儿童：[{text:Likes shoes}]} ]} ] 我想知道是否有一种优雅/更智能的方法可以将所有对象数组循环到文本对象，这样我就可以呈现它的字符串值

我正在寻找一个普通的JS解决方案，在这个解决方案中，我不会将几个映射函数链接在一起

最终结果是检索文本数据并在React组件上呈现，例如：

常量用户列表{data}{ 回来 {data.mapuser=> } ; } const SingleUser={user}=>{ const userDescription=//循环并转换以在此处呈现文本数据 回来 {user.name} {userDescription} } 例如，您可以使用来简化它

常数数据=[ {姓名：莫莉，描述：[ {children:[{text:喜欢跑步}]}， {儿童：[{文本：喜欢冰淇淋}]}， {儿童：[{文本：喜欢汽车}]} ]}, {姓名：Jay，描述：[ {儿童：[{text:喜欢骑自行车}]}， {儿童：[{text:Likes cake}]}， {儿童：[{text:Likes shoes}]} ]} ]; const flattedData=data.mapitem=>{ 项目 描述：item.description.flatMapel=>el.children[0]。文本 };

---

console.logflatteddata 在@Shreevardhan答案中显示，但考虑到childrens数组的每个元素

常数数据=[ {姓名：莫莉，描述：[ {children:[{text:喜欢跑}，{text:跑得很快！}]}， {儿童：[{文本：喜欢冰淇淋}]}， {儿童：[{文本：喜欢汽车}]} ]}, {姓名：Jay，描述：[ {儿童：[{text:喜欢骑自行车}]}， {儿童：[{text:Likes cake}]}， {儿童：[{text:Likes shoes}]} ]} ]; const flattedData=data.mapitem=>{ 项目 描述：item.description.flatMapel=>el.children.map\u el=>\u el.text };

---

console.logflatteddata 使用flatMap简化矩阵，然后使用用户组件中的映射来显示描述的文本

const data = [
    {name: "Molly", description: [
      {children: [{text: "Likes to run"}] },
      {children: [{text: "Likes ice cream"}]},
      {children: [{text: "Likes to cars"}] }
    ]},
    {name: "Jay", description: [
      {children: [{text: "Likes to race bikes"}]},
      {children: [{text: "Likes cake"}]},
      {children: [{text: "Likes shoes"}]}
    ]}
    ];
    
    const userData = data.map(item => ({
      ...item,
      description: item.description.flatMap(x => x.children[0].text)
    }));
  
  
  const UserList({ userData }) {
      return (
        <div>
          {userData.map((user) => (
            <SingleUser user={user} />
          ))}
        </div>
      );
    }
     
    const SingleUser = ({user}) => {
    
    const userDescription = // loop over and transform to render the text data here
    return(
     <>
       <div>{user.name}</div> 
   {
     userData.description.map(text => { 
           <div>{text}</div>
     });
   }
     </>
    )
    }

常数数据=[ {姓名：莫莉，描述：[ {children:[{text:喜欢跑步}]}， {儿童：[{文本：喜欢冰淇淋}]}， {儿童：[{文本：喜欢汽车}]} ]}, {姓名：Jay，描述：[ {儿童：[{text:喜欢骑自行车}]}， {儿童：[{text:Likes cake}]}， {儿童：[{text:Likes shoes}]} ]} ]; 让结果=数据。减少acc，currentObj=>{ 设obj={}； obj.name=当前obj.name； obj.description=currentObj.description.reduce inneracc，innerObj=>inneracc.concatinerObj.children[0]。文本，[] 返回acc.concatobj； }, []

---

console.logResultTeach名称具有包含三个文本的数组。你喜欢收到什么样的短信？首先还是全部？我想把它们都放在一个单独的盒子里，这很酷——据我所知，为什么我们只通过儿童的第一个索引？i、 e.el.children[0].text映射方法的第二个参数是索引，因此您可以在那里使用[0]而不是[index]。这非常棒，并且在孩子们收到多个项目时覆盖了整个范围。为什么要两次flatMap？他们正在对从第一个flatMap返回的数组应用第二个flatMap。这是一种绕过创建额外变量的简写方法。实际上，第二个变量是一个规则映射，我已经更正了它。。。