将嵌套数组对象值渲染到 JSX 元素中

Question

我有一个嵌套的对象数组，看起来像这样：

[
  {
    _Category: "Animals",
    _Child: {
       _Obj: [{_Title: "Monkey", _Link: "www.monkeys.com"}], [{_Title: "Monkey", _Link: "www.monkeys.com"}], etc
    }
  },
  {
    _Category: "Fruit",
    _Child: {
       _Obj: [{_Title: "Apple", _Link: "www.apples.com"}], [{_Title: "Pineapple", _Link: "www.pineapples.com"}], etc
    }
  }
]

我正在尝试将每个组的 _Title 和 _Link 附加到 JSX 元素中。我已经能够毫无问题地渲染_Categories，但是嵌套值让我很难过。

当我转到 DevTools 中的元素时，我可以看到每个项目有 11 个不同的组 --- 这是该特定类别下有多少对象数组---但是_Titles 和_Links 是空的。

在下面的代码中，我映射了_Category 数据并以这种方式显示类别。我是否必须为 _Child 对象做类似的事情——也许是另一张地图，还是其他什么？

---

代码：

Element = ({ cats }) => {
    return (
        <div>
            {cats
                .filter((cat) => cat._Root === "Quick Links")
                .map((cat) => (
                    
                 <>
                  <div className={"colFor-" + cat._Category}>
                    <h5>{cat._Category}</h5>

                    {cat._Child._Obj.map((item) => (
                        <>
                            <a href={item._Link}>
                                <p>{item._Title}</p>
                            </a>
                            <br />
                        </>
                    ))}
                        
                   </div>
                  </>
                ))
            }
            
        </div>
    )
  }

cats 是这样的：

---

更新：正如@Dominik 指出的那样，我的 obj 设置方式不正确，因此我对其进行了更改。

Answer 1

根据您的示例数据， cat._Child._Obj 是一个数组，其中的每个项目也是一个数组，所以我认为您需要先将数组展平，然后使用 map 函数。

const myarr = [[{_Title: "Monkey1", _Link: "www.monkeys1.com"}], [{_Title: "Monkey2", _Link: "www.monkeys1.com"}]];
const myarrFlat = myarr.flat();
myarrFlat.map(cat => console.log(cat._Title, cat._Link));