[英]Access wanted data in API?
*apologies as I have posted a similar question earlier but deleted it as this is a better-structured question. *抱歉,我之前曾发布过类似的问题,但由于这是结构更好的问题而将其删除。
Hello! 你好! I want to target
largeImageURL
from the PixaBay API to render within the GridTile
in my PhotoResults container. 我想从PixaBay API中定位
largeImageURL
,以在PhotoResults容器的GridTile
中进行渲染。 I've configured Redux into the application. 我已经将Redux配置到了应用程序中。 When I console log
this.props.photos
after submitting a searchText
, I receive an array with the length of 20. I know that 0:
in 0: Array(20)
means the first index position, but I don't know how that helps me to target largeImageURL
. 当我控制台日志
this.props.photos
提交后searchText
,收到的阵列与20的长度我知道0:
在0: Array(20)
表示第一索引的位置,但我不知道这样的帮助我定位largeImageURL
。 How do I target largeImageURL
to render within the GridTile
? 如何定位
largeImageURL
到内作出GridTile
? Many thanks! 非常感谢!
REDUCER 减速器
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;
PHOTO RESULTS CONTAINER 照片结果容器
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);
Try this. 尝试这个。 Initially this.props.photos will be undefined so you need to do conditional check before doing .map
最初,this.props.photos将是未定义的,因此您需要先进行条件检查,然后再执行.map
return(){
return(
<div>
<GridList cols={3}>
{this.props.photos && Array.isArray(this.props.photos[0]) && this.props.photos[0].length > 0 && this.props.photos[0].map(photo => (
<GridTile title={photo.tags} key={photo.id}>
<img src={photo.largeImageURL} alt="" />
</GridTile>
))}
</GridList>
</div>
)
}
This will also work but I don't recommend if else in render 这也可以使用,但我不建议是否在渲染中使用
render() {
let photoList;
if (this.props.photos && Array.isArray(this.props.photos[0]) && this.props.photos[0].length > 0)
photoList = (
<GridList cols={3}>
{this.props.photos[0].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>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.