希望这将是一个快速修复，但我看不到。我正在尝试使用react-photo-gallery从Unsplash渲染图像。 API的响应是一个对象数组，如下所示：
div {
position: absolute;
}
body {
width: 100vw;
height: 100vh;
display: flex;
align-items:center;
justify-content: center;
}
.text{
font-size: 3em;
/*animation: showfade 4s linear 2s both;*/
animation-name: showfade;
animation-duration: 4s;
animation-delay: .4s;
animation-fill-mode: both;
}
.rect {
background-color: #07f;
width: 200px;
height: 200px;
/*animation: rect 2s linear 6s both;*/
animation-name: rect;
animation-duration: 2s;
animation-delay: 4.4s;
animation-fill-mode: both;
}
@keyframes showfade {
0%, 100% {
opacity: 0;
}
50% {
opacity: 100;
}
}
@keyframes rect {
from {
transform: scale(0);
border-radius: 100%;
}
}react-photo-gallery组件要求所讨论的数组的排列方式如下：
<div class="text">Hello</div>
<div class="rect"></div>我已经设法映射了我的Unsplash响应，并创建了一个特定于react-photo-gallery的数组，我已经在控制台中对其进行了检查，并且该数组已经存在。但是，当我将新数组传递给组件时，它不会拾取它。没什么坏的，根本没显示。
我的整个页面看起来像这样：
{
"id": "LBI7cgq3pbM",
"created_at": "2016-05-03T11:00:28-04:00",
"updated_at": "2016-07-10T11:00:01-05:00",
"width": 5245,
"height": 3497,
"color": "#60544D",
"likes": 12,
"liked_by_user": false,
"description": "A man drinking a coffee.",
"user": {
"id": "pXhwzz1JtQU",
"username": "poorkane",
"name": "Gilbert Kane",
"portfolio_url": "https://theylooklikeeggsorsomething.com/",
"bio": "XO",
"location": "Way out there",
"total_likes": 5,
"total_photos": 74,
"total_collections": 52,
"instagram_username": "instantgrammer",
"twitter_username": "crew",
"profile_image": {
"small": "https://images.unsplash.com/face-springmorning.jpg?q=80&fm=jpg&crop=faces&fit=crop&h=32&w=32",
"medium": "https://images.unsplash.com/face-springmorning.jpg?q=80&fm=jpg&crop=faces&fit=crop&h=64&w=64",
"large": "https://images.unsplash.com/face-springmorning.jpg?q=80&fm=jpg&crop=faces&fit=crop&h=128&w=128"
},
"links": {
"self": "https://api.unsplash.com/users/poorkane",
"html": "https://unsplash.com/poorkane",
"photos": "https://api.unsplash.com/users/poorkane/photos",
"likes": "https://api.unsplash.com/users/poorkane/likes",
"portfolio": "https://api.unsplash.com/users/poorkane/portfolio"
}
},
"current_user_collections": [ // The *current user's* collections that this photo belongs to.
{
"id": 206,
"title": "Makers: Cat and Ben",
"published_at": "2016-01-12T18:16:09-05:00",
"updated_at": "2016-07-10T11:00:01-05:00",
"curated": false,
"cover_photo": null,
"user": null
},
// ... more collections
],
"urls": {
"raw": "https://images.unsplash.com/face-springmorning.jpg",
"full": "https://images.unsplash.com/face-springmorning.jpg?q=75&fm=jpg",
"regular": "https://images.unsplash.com/face-springmorning.jpg?q=75&fm=jpg&w=1080&fit=max",
"small": "https://images.unsplash.com/face-springmorning.jpg?q=75&fm=jpg&w=400&fit=max",
"thumb": "https://images.unsplash.com/face-springmorning.jpg?q=75&fm=jpg&w=200&fit=max"
},
"links": {
"self": "https://api.unsplash.com/photos/LBI7cgq3pbM",
"html": "https://unsplash.com/photos/LBI7cgq3pbM",
"download": "https://unsplash.com/photos/LBI7cgq3pbM/download",
"download_location": "https://api.unsplash.com/photos/LBI7cgq3pbM/download"
}
}
为澄清起见，道具具有数据（const PHOTO_SET = [
{
src: 'http://example.com/example/img1.jpg',
width: 4,
height: 3
},
{
src: 'http://example.com/example/img2.jpg',
width: 1,
height: 1
}
];
），而import React, { Component } from 'react';
import { connect } from 'react-redux';
import { getPhotos } from '../../actions/photoActions';
import { GET_CONTACTS } from '../../actions/types';
import Gallery from 'react-photo-gallery';
class Photos extends Component {
componentDidMount(){
this.props.getPhotos();
}
render() {
const { photos } = this.props;
const PHOTO_SET = photos.map( (photo, i) => {
return {
src: photo.urls.small,
width: 4,
height: 3
}
});
console.log(photos);
console.log(PHOTO_SET);
return (
<div className="container-fluid">
<div className="container">
<h1 className="display-3">A little gallery courtesy of <a href="">unsplash.com</a></h1>
</div>
<div className="gallery-row">
<Gallery photos={PHOTO_SET} direction={"column"}/>
</div>
</div>
)
}
}
const mapStateToProps = (state) => ({
photos: state.photo.photos
})
export default connect(mapStateToProps, { getPhotos })(Photos);
拥有重组数据，但组件无法正常工作。任何帮助将非常感激！谢谢