我试图在React Grid Gallery库中以动态方式显示图像。我想在不同的网格中按类别显示图像。就像卧室的位置只会在一个网格中有卧室图片，而厨房将在另一个网格中。但是我做不到。

这是我从后端得到的json响应。我正在根据位置在列表中显示图像

{
  "data": [
    {
      "id": "f06f2cdf-1bb8-4388-a655-4e916a2703ce","visitLocation": "dining room","visitRequirementList": [
        {
          "height": "13.00","imageName": "dining pic 1","imagePath": "visitImageDirectory/0297b1ef-644b-45fc-9760-4e5693f54ac0.png",},{
          "height": "13.00","imageName": "dining pic 2","imagePath": "visitImageDirectory/1b4915c1-733a-4bdb-a8d7-59ce3a095d44.png",}
      ]
    },{
      "id": "ce059d7a-d3d4-462c-a90f-62be13f24a29","visitLocation": "bedroom","visitRequirementList": [
        {
          "height": "11.00","imageName": "bedroom pic 1","imagePath": "visitImageDirectory/64960b86-f9bf-4de9-816f-f27487245c53.png",]
    }
  ],"message": "data Found","status": "success"
}

这是我在前端尝试做的操作，以按类别显示图像：

  import Gallery from 'react-grid-gallery';
    render () {
    const images = this.state.ioImageListing.map((io,key) => {
     return   {
            src: <div>
                {io.visitRequirementList.map((skill,j) =>
 <div key={j}>{this.state.apiUrl 
+'/api/v1/visitImageRequirementInfo/getImageByImagePathId?imagePath=' + skill.imagePath}
                        </div>
                    )}
                </div>,thumbnail:
                    <div>
                        {io.visitRequirementList.map((skill,j) =>

 <div key={j}>{this.state.apiUrl + 
'/api/v1/visitImageRequirementInfo/getImageByImagePathId?imagePath=' + skill.imagePath}


                            </div>
                        )}
                    </div>,thumbnailWidth: 320,thumbnailHeight: 174,thumbnailCaption:<p style={{width:'200px'}}>
                 <div>
                  {io.visitRequirementList.map((skill,j) =>
                  <p>{skill.imageName}
                  <p>H:{skill.height}</p>
           </p>
                        )}
                    </div>
                </p>,isSelected: true,} ;
        })
            return (
              <div>

                <div style={{margin:"10px"}} >
                 <Gallery
                 lightboxWidth={400}
                 images={images}/>
                 </div>
                    </div>
            );
          }

对此的任何帮助将不胜感激