*抱歉,因为我之前发布了一个类似的问题,但由于这是一个结构更好的问题,所以将其删除。
你好!我想largeImageURL
从 PixaBay API 定位到GridTile
在我的 PhotoResults 容器中呈现。我已将 Redux 配置到应用程序中。this.props.photos
当我在提交 a 后控制台日志时searchText
,我收到一个长度为 20 的数组。我知道0:
in0: Array(20)
表示第一个索引位置,但我不知道这如何帮助我定位largeImageURL
. 我如何定位largeImageURL
到在GridTile
? 非常感谢!
减速器
import * as actionTypes from '../actions/actions_index';
const photos = (state = [], action) => {
switch(action.type) {
case actionTypes.FETCH_PHOTOS:
console.log('Action received', action);
return [ action.payload.data.hits ];
default:
return state;
}
}
export default photos;
照片结果容器
import React, { Component } from 'react';
import {GridList, GridTile } from 'material-ui/GridList';
import { connect } from 'react-redux';
class PhotoResults extends Component {
render() {
let photoList;
if (this.props.photos) {
photoList = (
<GridList cols={3}>
{this.props.photos.map(photo => (
<GridTile title={photo.tags} key={photo.id}>
<img src={photo.largeImageURL} alt="" />
</GridTile>
))}
</GridList>
)
} else {
photoList = null;
}
console.log(this.props.photos);
return (
<div>
{photoList}
</div>
);
}
}
const mapStateToProps = (state) => {
return { photos: state.photos };
}
export default connect(mapStateToProps, null)(PhotoResults);