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

博德罗夫

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

[
  {
    _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中的Elements时,我可以看到每个项目有11个不同的组-这是该特定类别下有多少个对象数组-但_Titlesand_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的方式不正确,因此我对其进行了更改。

埃里克

根据您的样本数据,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));

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何将JSX元素串联到数组中?

根据源对象是否具有某些值的深度嵌套属性,有条件地渲染JSX元素

Elasticsearch:将新元素追加到嵌套的对象数组中

如何将嵌套的XML元素解组到数组中?

变异对象以将值排序到数组中的键

遍历渲染器中的嵌套json对象数组(ReactJS)

渲染对象数组以在JSX中列出

转换嵌套数组->数组->对象到数组->对象=>对象值:对象值

将项目从数组中渲染到DOM中,并为每次单击更改值

将数组对象渲染到FlatList React Native中

从JSX中的渲染访问数组

从React中的对象数组渲染元素

Datables从Ajax请求中渲染嵌套对象和数组

将数据复制到对象的嵌套数组中

如何渲染属性嵌套在对象嵌套数组中的元素数组?

如何使用jsx渲染reactjs 1.0中的对象数组?

如何迭代嵌套对象并在jsx中渲染?

将基于值的 javascript 对象数组分组到那里自己的对象子数组中

在反应中渲染嵌套的对象数组

如何从嵌套对象数组中删除元素?

从对象数组渲染多个 JSX 元素

如何将嵌套数组中的元素转换为具有名称和值属性的对象数组?

基于嵌套数组渲染嵌套元素

如何将对象数组中的值映射到渲染元素的样式

如何将数组插入到嵌套的 JavaScript 对象中

从嵌套的 json 值对象中获取数组

在javascript中按值类型将嵌套数组对象更改为对象

嵌套对象值的 JSX 条件渲染

将嵌套的 JSON 对象展平并排序到 javascript 中的数组中