我正在尝试访问从API返回的数据的属性,我可以访问某些属性,但是当我尝试返回数据的图像属性时,我一直无法读取未定义的属性,图像属性为数据中的对象。这是下面的代码。
class GifDetail extends React.Component {
constructor(props) {
super(props);
this.state = {
gifImages: [],
};
}
async componentDidMount() {
const url = `https://api.giphy.com/v1/gifs/${this.props.match.params.id}?api_key=GuN18iG06KnZHBSYQR***Cw2YCZHN37`;
const response = await fetch(url);
const data = await response.json();
console.log(data);
this.setState({ gifImages: data.data });
}
render() {
const { gifImages } = this.state;
return (
<div>
<img
src={`${this.state.gifImages.images.fixed_height_small_still.url}`}
width="100"
className="img-fluid"
/> //this line is returning undefined
<p>{gifImages.images.original}</p> // this is the line that is returning undefined
<p>{gifImages.username}</p>
<p>{gifImages.url}</p>
<p>{gifImages.title}</p>
</div>
);
}
}
export default GifDetail;
gifImages.images && gifImages.images.original
:而不是:
<p>{gifImages.images.original}</p>
write:
{ gifImages.images && <p>{gifImages.images.original}</p> }