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 循环的原因。问题不是this.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)
    })

  }

我希望它的第一个对象映射到网格 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>   

    );   
  }
}

标签： javascriptreactjs

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

问题描述

解决方案

推荐阅读