Question

如何访问 React 中的嵌套数组[重复]

2022-02-24

801

arrays reactjs

我必须从类似于以下内容的 API 访问数据：

{
 "speakers": [
   {
     "name": "speakerName",
     "profile_picture": "profilePic"
   }
 ]
},
{
 "speakers": []
}

我将 Speakers 保存为数组，但我不知道如何访问内部数组内的对象。 Speakers 参数提供整个数组（名称和个人资料图片）。

const PublicEventsInfo = ({speakers}) => { 
 
}

当我尝试以下代码时，出现错误： TypeError：无法读取未定义的属性。

speakers[0].name

我如何访问 PublicEventsInfo 中的 Speakers 名称部分？

Answer 1

obj.key 或 obj[key] 。但是，由于您有一个数组，因此您需要使用数字索引来访问它。因此，假设您想要数组中的第一个，并且数组中始终有一个，您可以这样做：

const test = {
 "speakers": [
   {
     "name": "speakerName",
     "profile_picture": "profilePic"
   }
 ]
}
const PublicEventsInfo = ({speakers}) => { 
 console.log(speakers[0].name)
}
PublicEventsInfo(test)

但是，您提供的数据似乎具有不正确的结构：

{
 "speakers": [
   {
     "name": "speakerName",
     "profile_picture": "profilePic"
   }
 ]
},
{
 "speakers": []
}

这不是有效的 json，除非将其包装在数组中。

Answer 2

如果我正确理解了这个问题

你应该能够做到 const name = Speakers.name

StarnightFox

2022-02-24

Answer 3

我想你的意思是这样的？ data.map(x=>x.speakers).flat() 可以执行类似 unwrap Speakers and concat

let data = [{
    "speakers": [{
      "name": "speakerName",
      "profile_picture": "profilePic"
    }]
  },
  {
    "speakers": []
  }
]

const PublicEventsInfo = ({
  speakers
}) => {
  return <ul>{speakers.map((x,i)=><li key={i}>{x.name}:{x.profile_picture}</li>)}</ul>
}

export const Page=()=><PublicEventsInfo speakers={data.map(x=>x.speakers).flat()}>

的操作