Javascript 通过对象数组进行映射并访问对象值

我试图从对象数组中选取一个值，并且该值只能来自第一个对象。 首先，我有一个像这样的对象数组：

items [
  [
    {id: 1, title: "title1", imgUrl: "https://someimage1"},
    {id: 2, title: "title2", imgUrl: "https://someimage2"}
  ],
  [
    {id: 1, title: "title1", imgUrl: "https://someimage1"},
    {id: 2, title: "title2", imgUrl: "https://someimage2"}
  ],
  [
    {id: 1, title: "title1", imgUrl: "https://someimage1"},
    {id: 2, title: "title2", imgUrl: "https://someimage2"}
  ]
]

我计划在页面上显示标题和img url。我正在使用react，这是我迄今为止尝试过的：

items.map(item => {
   //here i enter each array of the big array individually

   //here i will enter first object of the give array
   console.log('ITEM:', item[0])
})

在console.log中，我得到以下信息：

ITEM: {id: 1, title: "title1", imgUrl: "https://someimage1"}
ITEM: {id: 1, title: "title1", imgUrl: "https://someimage1"}
ITEM: {id: 1, title: "title1", imgUrl: "https://someimage1"}

但是我需要获得每个

标题

和

imgUrl

，因此在我的

.map（）

中，我执行以下操作：

    items.map(item => {
       //here i enter each array of the big array individually

       //here i will enter first object of the give array
       console.log('ITEM:', item[0].title)
    })

但我得到了这个错误：

TypeError:无法读取未定义的属性“title”

我不明白为什么我认为我可以使用点符号访问对象中您想要的任何键：

for more context:
            <div>
                {
                    items.map((item) => {
                        return <ul>
                            <li>
                                <div>
                                    <p>{item[0].title}</p>
                                    <img src={item[0].url}/>
                                </div>
                            </li>
                        </ul>
                    })
                }
            </div>

有关更多上下文：
{
items.map（（item）=>{
返回


{item[0]。title}



})
}

我对上述问题的解决办法

因此，我花了一些时间来处理这个问题，这对我很有用：

            items.map((item) => {
                return item.map ((x, index) => {
                    if (index === 0) {
                        return <ul>
                            <li>
                                <div>
                                    <p>{ x.title }</p>
                                    <img src={x.url}/>
                                </div>
                            </li>
                        </ul>
                    }
                })
            })

items.map（（item）=>{
return item.map（（x，index）=>{
如果（索引==0）{
返回


{x.title}



}
})
})

---

仍然不确定为什么我最初的想法

项[0]。如果没有嵌套的map（）函数，title

将无法工作尝试在键周围使用引号：

items [
  [
    {"id": 1, "title": "title1", "imgUrl": "https://someimage1"},
    {"id": 2, "title": "title2", "imgUrl": "https://someimage2"}
  ]
]

---

[根据OP更新帖子进行更新：

由于map构建了一个新数组，所以在不使用返回的数组时使用它是一种反模式；请改用forEach或for of。 不应使用地图的标志：
A） 你不是在使用数组吗 返回，和/或

B） 您没有从回调返回值。

此外，以这种方式嵌套2个循环将强制执行两倍于其运行长度的迭代次数

如果需要访问子元素并了解其索引或键，请通过以下方式使用该值：

array[index]

或

object.key

并使用单个

map（）

（完整代码段中的示例）

如果您确实需要在每个元素上循环（由于您的问题中未表达的某些条件），请使用：

.find（）

（单个元素）

或

.filter（elm=>elm==='someValue'）

（多个元素）

或

.reduce（）

（多个元素）随移动而变化的元素

甚至是

.forEach（）

（多元素）在阵列构建之外执行附加功能（您将需要推送到类似

让loopArray=[]

）

继续原始答案]

将ul标记移到map语句之外，并将url更改为imgUrl

请记住，如果

项

是通过异步生成的，那么在使用

映射

之前，您还需要验证

项

，例如：

{(items && items.length) && items.map(item=>{
    /*code*/
)}

工作代码段（无异步检查）：

const SomeComponent=（）=>{
常数项=[
[
{id:1，标题：“title1.1”，imgUrl:https://p7.hiclipart.com/preview/917/362/567/halloween-trick-or-treating-double-ninth-festival-illustration-halloween-design-elements.jpg"},
{id:2，标题：“标题2”，插图：https://someimage2"}
],
[
{id:1，标题：“标题1.2”，imgUrl:https://image.shutterstock.com/image-vector/silhouette-cat-dog-on-white-600w-671156590.jpg"},
{id:2，标题：“标题2”，插图：https://someimage2"}
],
[
{id:1，标题：“标题1.3”，imgUrl:https://jngnposwzs-flywheel.netdna-ssl.com/wp-content/uploads/2019/05/Transparent-OrangeWhiteCat-768x1030.png"},
{id:2，标题：“标题2”，插图：https://someimage2"}
]
];
返回(

{items.map（（项，索引）=>{
返回(

{item[0]。title}


)
})}

)
}
ReactDOM.render(
,
document.getElementById（“react”）
);

第一个代码示例中的“对象数组”不是有效语法，看起来如果它是有效语法，那么它就是数组数组。您可能需要查看/修改该信息，否则将很难理解您正在处理的情况…请创建一个可复制的代码段（通过单击问题的
[]
按钮）。根据您提供的详细信息，我无法在最后一段代码
项[0]中重现您的错误。url
应该是
项[0]。imgUrl
。我还非常确定，在写多行代码时，您需要将JSX括在括号中。我在下面的答案中添加了一个更新，以回应您使用解决方案更新的问题。我认为在这种情况下不应该嵌套循环（另外，在所有回调迭代中使用
.map（）
而不返回值被认为是反模式的，我提供了替代方法）。干杯