ReactJS-如何从嵌套对象访问数据？ （已获取 API）

Question

Image from console.log

大家好，我是 React JS 的新手，基本上是 Web 开发本身。有谁知道如何访问嵌套对象的突出显示部分？我已经访问了一些部分，例如： 我已经使用以下方法访问了该名称：props.list.name 但是当谈到星座部分时，我很难访问它并显示它。 顺便说一句，这里是 API link https://api.genshin.dev/characters/eula 提前谢谢你:)

Answer 1

props.list.constellations[你的索引].name

Answer 2

可以使用map，遍历数组"constellations"中的所有元素，

我不知道你的代码是什么样的，最好把你自己的代码，然后编辑你的post，因为你，你的代码不存在，我放一个简单的例子为你

const constellations = [
  {
    id: 1,
    name: "Dashboard",
    description:"icon",
  }, 
  {
    id: 2,
    name: "Dashboard",
    description:"icon",
  }]

{constellations.map(constellation =>(
      <div key={constellation.id}>
        <h1>{constellation.name}<h1/>       
      </div>  
 ))}

---

如果你使用“props.list”，你可以将代码写成：

{props?.list?.constellations?.map(constellation =>(
      <div key={constellation.id}>
        <h1>{constellation.name}</h1>    
        <h1>{constellation.unlock}</h1>
        <h1>{constellation.description}</h1>
      </div>  
 ))}

Answer 3

您可以将 object destructuring 用于多层嵌套对象。