在jsx语法里面遍历双层数组，每层里面的东西都要渲染出来

Question

我的数据格式是这样的需要遍历让每一层里的东西都渲染出来，

这个要怎么整

Answer 1

// 第一步：将一棵展开
function flatTree(tree, parentId) {
  return tree.reduce((list, { id, flag, name, value, child }) => {
    list.push({ id, flag, name, parentId, value });
    if (child) {
      return list.concat(flatTree(child, id));
    }
    return list;
  }, []);
}
// 第二步：渲染
flatTree(filtrateFields).map(({ id, flag, name, value }) => (
  <label key={id}>
    <input type="checkbox" checked={flag || false} onChange={({ target: { checked } }) => myOnChange(id, value, checked)} />
    {name}
  </label>
));

Answer 2

map两次呗，

fil.map(f=>
    <div>
        {f.child.map(c=><div></div>)}
    </div>）

Answer 3

filtrateFields.map((item,i) =>{
     return(
     <div key={i}>
     {item.name}
     </div>
     )
     item.map((list,k) =>{
       return(
       <div key={k}>
       {list.name}
       </div>
       )
     })
})