如何从React中的api渲染？
如何从React中的api渲染？
提问于 2019-08-04 14:35:17
我已经使用NASA的api成功地更改了状态。现在，我想显示来自api的标题、图像和解释。我是个初学者，所以对我不要太苛刻！
我已经尝试过搜索和尝试不同的代码，但都没有成功。不知道这里有没有人能指出我做错了什么。
this.state = {
picture: "",
date: ""
};
componentDidMount(){
fetch(`https://api.nasa.gov/planetary/apod?api_key=${API_KEY}`)
.then(response => response.json())
.then(json => this.setState({ picture: json }));
};
render(){
return (
<div className="container">
<h1>NASA Picture of the Day</h1>
<form onSubmit={this.handleSubmit}>
(YYYY-MM-DD):
<input
type="text"
id="date"
placeholder="input date"
value={this.state.date}
onChange={this.handleChange}
/>
<button type="submit" disabled={!this.state.date}>
Submit
</button>
</form>
</div>
);
};回答 4
Stack Overflow用户
回答已采纳
发布于 2019-08-04 14:57:27
目前来自NASA API的示例响应如下：( NOt确定将来是否会发生变化)
{
"date": "2019-08-04",
"explanation": "Twenty-one years ago results were first presented indicating that most of the energy in our universe is not in stars or galaxies but is tied to space itself. In the language of cosmologists, a large cosmological constant -- dark energy -- was directly implied by new distant supernova observations. Suggestions of a cosmological constant were not new -- they have existed since the advent of modern relativistic cosmology. Such claims were not usually popular with astronomers, though, because dark energy was so unlike known universe components, because dark energy's abundance appeared limited by other observations, and because less-strange cosmologies without a signficant amount of dark energy had previously done well in explaining the data. What was exceptional here was the seemingly direct and reliable method of the observations and the good reputations of the scientists conducting the investigations. Over the two decades, independent teams of astronomers have continued to accumulate data that appears to confirm the existence of dark energy and the unsettling result of a presently accelerating universe. In 2011, the team leaders were awarded the Nobel Prize in Physics for their work. The featured picture of a supernova that occurred in 1994 on the outskirts of a spiral galaxy was taken by one of these collaborations. News: APOD is now available via Facebook in Hindi.",
"hdurl": "https://apod.nasa.gov/apod/image/1908/SN1994D_Hubble_2608.jpg",
"media_type": "image",
"service_version": "v1",
"title": "Rumors of a Dark Universe",
"url": "https://apod.nasa.gov/apod/image/1908/SN1994D_Hubble_960.jpg"
}在同一组件中显示来自NASA的一些信息(假设您希望在单击提交按钮之前显示详细信息)
let picture = this.state.picture;
return (
<div className="container">
<h1>NASA Picture of the Day</h1>
<h2>{picture.title}</h2>
<img src={picture.url} alt={picture.title}></img>
<p>{picture.explanation}</p>
___________ YOUR FORM INPUT CONTROLS _____________
</div>
);Stack Overflow用户
发布于 2019-08-04 14:44:51
您没有使用this.state.picture anywhere。只需使用现有的任何数据来渲染图像即可。
我不确定数据是什么格式，但假设API返回JSON，如下所示：
{ "url": "http://nasa.gov/path/to/image.png" }那么你只需要在某个地方找到它：
{ this.state.picture && <img src={this.state.picture.url} /> }Stack Overflow用户
发布于 2019-08-04 14:43:50
当您在图片中存储数据时，请在render中写入以下内容
return (<ul>this.pictureToDisplay()</ul>)pictureToDisplay定义:- (假设这是一个图片数组)
return (this.state.picture.map(item=><li>item</li>))页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57344380
复制相关文章
相似问题
腾讯云开发者
