Javascript 有没有办法从API映射以下对象

我想将对象从API映射到渲染方法。但无法绘制地图

我已经试过了

{
  Uid : "1" ,
  value : 
  {
   "genre": "Artist" ,
   ....
  }
}

而且很好，很有效 但我想尝试以下方法，因为我的API包含以下对象

{
  "Uid": {
    "genre": "Artist" , 
    ....
  }
}

整个对象在firebase db中如下所示

{
    "Uid": {
        "title": "someTitle",
        "description": "Bla Bla",
        "artistName": "Bla Bla",
        "url": "someUrl",
        "likeCount": 9,
        "time": {
            "_seconds": 1564426800,
            "_nanoseconds": 0
        },
        "genre": "someGenre"
    }
}

我的构造函数包含

constructor(props) {
    super(props);
    this.state = {
      categories: [],
      G1 : [],
      G2 : [],
      G3 : []
    }; 
}                 

同样componentdidmount紧随其后，在for循环中，第一个对象进入网格G1，第二个进入G2，第三个进入G3，第四个进入G1，依此类推，这就是为什么我有一个for循环。问题不是这个.state.categories[j]，而是应该有别的东西，那是什么。我不知道

componentDidMount(){
    axios.get("/getArtCol").then(res => {
      const key = Object.keys(res.data);
      const value = Object.values(res.data);   
      const length = this.state.categories.length

      key.forEach((element, i ) => {
        this.state.categories.push({name: element , title:Object.values(value[i])[0], price:Object.values(value[i])[1], url:Object.values(value[i])[2], likeCount:Object.values(value[i])[3], description:Object.values(value[i])[4], artistName:Object.values(value[i])[5], genre:Object.values(value[i])[6]});
      });

      let j = 0
      for(let i = 0; i < length; i++ ) {
        //this.state.paintingKeys.push({name: element , url:value[i]});
        this.state.G1.push(this.state.categories[j])
        j++
        if  (j===length){
          break;
        }                                           
        this.state.G2.push(this.state.categories[j])
        j++
        if  (j===length){
          break;
        }
        this.state.G3.push(this.state.categories[j])
        j++
        if  (j===length){
          break;
        }
      };
      this.setState({ });    
     console.log(res.data)
     //console.log(this.state.G1)
     //console.log(this.state.G2)
     //console.log(this.state.G3)    
    }).catch(err=>{
      console.log(err)
    })

  }

componentDidMount（）{
获取（“/getArtCol”）。然后（res=>{
常量键=对象键（res.data）；
常量值=对象值（res.data）；
常量长度=this.state.categories.length
key.forEach（（元素，i）=>{
this.state.categories.push（{name:element，title:Object.values（value[i]）[0]，price:Object.values（value[i]）[1]，url:Object.values（value[i]）[2]，likeCount:Object.values（value[i]）[3]，description:Object.values（value[i]）[4]，artistName:Object.values（value[i]）[5]，流派：Object.values（value[i]）[6]）；
});
设j=0
for（设i=0；i{
console.log（错误）
})
}

我希望它的第一个对象映射到网格G1，第二个映射到G2，第三个映射到G3，第四个映射到G1，以此类推

  render(){ 
    const { classes } = this.props;
    let galleryMapped1 = this.state.G1 ? (this.state.G1.map(category=>(            
      <div>
        <h6>{category.Uid.title}</h6>
        <h4>{category.Uid.price}</h4>
        <h4 >{category.Uid.genre}</h4>
        <h4 >{category.Uid.artistName}</h4>
        <h4>{category.Uid.description}</h4>
        <h4>{category.Uid.likeCount}</h4>
      </div>
    ))) : (<p>Sorry, data not fetched</p>)

    let galleryMapped2 = this.state.G2 ? (this.state.G2.map(category=>(      
      <div>
      <h6>{category.Uid.title}</h6>
      <h4>{category.Uid.price}</h4>
      <h4 >{category.Uid.genre}</h4>
      <h4 >{category.Uid.artistName}</h4>
      <h4>{category.Uid.description}</h4>
      <h4>{category.Uid.likeCount}</h4>
    </div>
    ))) : (<p>Sorry, data not fetched</p>)

    let galleryMapped3 = this.state.G3 ? (this.state.G3.map(category=>(    
      <div>
      <h6>{category.Uid.title}</h6>
      <h4>{category.Uid.price}</h4>
      <h4 >{category.Uid.genre}</h4>
      <h4 >{category.Uid.artistName}</h4>
      <h4>{category.Uid.description}</h4>
      <h4>{category.Uid.likeCount}</h4>
    </div>
    ))) : (<p>Sorry, data not fetched</p>)

    return (
      <div>
        {galleryMapped1}   
        {galleryMapped2}
        {galleryMapped3}
      </div>   

    );   
  }
}

render（）{
const{classes}=this.props；
让galleryMapped1=this.state.G1？（this.state.G1.map（category=>）
{category.Uid.title}
{category.Uid.price}
{category.Uid.genre}
{category.Uid.artistName}
{category.Uid.description}
{category.Uid.likeCount}
)))：（对不起，未获取数据
）
让galleryMapped2=this.state.G2？（this.state.G2.map（category=>）
{category.Uid.title}
{category.Uid.price}
{category.Uid.genre}
{category.Uid.artistName}
{category.Uid.description}
{category.Uid.likeCount}
)))：（对不起，未获取数据
）
让galleryMapped3=this.state.G3？（this.state.G3.map（category=>）
{category.Uid.title}
{category.Uid.price}
{category.Uid.genre}
{category.Uid.artistName}
{category.Uid.description}
{category.Uid.likeCount}
)))：（对不起，未获取数据
）
返回(
{galleryMapped1}
{galleryMapped2}
{galleryMapped3}
);   
}
}

我想你想要

 Object.keys(YourObject).map();

---

如果不是，请添加更多说明并将渲染方法粘贴到此处

由于两个对象的格式不同，您需要更改映射内容：

对于第一个对象，成员是obj.Uid和obj.value，然后obj.value有obj.value.genre，等等

但是第二个对象的格式不同，它只有一个成员obj.Uid，这是一个包含更多成员的对象：obj.Uid.title，obj.Uid.description

---

因此，如果您想映射字段标题、描述等。。。然后您需要引用obj.Uid，不仅仅是obj，而且绝对不是obj.value，因为它不是第二个对象的成员。

假设您的数据是由某个uuid设置关键帧的相同形状对象的集合

Object.values

返回一个值数组，然后可以对其进行迭代/映射/缩减，而

Object.entries

返回一个键值元组数组

在本例中，我使用entries方法并映射到数组上，从对象和构造中提取uid键和三个属性，将这些值映射到字符串并在最后打印出来。只是想说明映射值的突变可以是任何东西

const数据对象={
"1234567890": {
“头衔”：“某个头衔”，
“描述”：“布拉布拉”，
“艺人姓名”：“布拉布拉”，
“url”：“someUrl”，
“likeCount”：9，
“时间”：{
“_秒”：156446800，
“_纳秒”：0
},
“流派”：“某种流派”
},
"9876543210": {
“头衔”：“其他人的头衔”，
“描述”：“布拉布拉布拉布拉”，
“艺人姓名”：“布拉布拉布拉布拉布拉”，
“url”：“someUrl”，
“likeCount”：2，
“时间”：{
“_秒”：1564426900，
“_纳秒”：0
},
“类型”：“其他类型”
},
"5432109876": {
“头衔”：“其他头衔”，
“描述”：“Bla-Bla，oops”，
“艺人名称”：“布拉布拉，哎呀”，
“url”：“someUrl”，
“likeCount”：1337，
“时间”：{
“_秒”：156443800，
“_纳秒”：0
},
“流派”：“其他酷流派”
},
};
const mappedData=Object.entries（数据对象）
.map（[uid，{genre，likeCount，title}]）=>{
返回`${title.toUpperCase（）}（liked${likeCount}次）[uid:${uid}]`；
});
console.log（mappedData）在渲染方法中尝试了哪些代码？什么不起作用？是否有错误？预期的输出是什么？除非这是一个具有多个相同形状值的对象，否则键值对上的任何类型的映射都不适合您，只需直接渲染对象字段。@skovy，事实上，我正试图通过componentdidmount从API获取同一对象，我只想放置ob