reactjs - 如何使用 fetch 发布一些数据
问题描述
我只是想知道我是否可以使用 MoviesDB 中的 fetch api 发布数据。我能够将信息发布到控制台。但现在我想在我的 React 页面上实际渲染。下面是我的代码。任何帮助表示赞赏。谢谢!
import React, {Component} from 'react';
import './App.css';
class Home extends Component{
constructor(props) {
super(props);
this.state = {
posts:{}
}
}
getPost = () => {
return fetch("https://api.themoviedb.org/3/movie/550?api_key=54a83919a7f93d82a8b8bdd417544d6f")
.then(res=>res.json())
.then(posts => console.log(posts))
}
render() {
return (
<div className="App">
<div className="headings">
<img className="LOGO" src="https://www.moonlight.com.au/wp-content/themes/moonlight-2016/dist/images/moonlight-logo.png" alt="back"/>
<input className="input"
placeholder="Enter a movie title" />
<button onClick={this.getPost}>Get post</button>
<div>{JSON.stringify(this.state.posts)}</div>
</div>
</div>
);
}
}
export default Home;
解决方案
在您使用的渲染方法中,this.state.posts
但您没有在任何地方更新它。
替换.then(posts => console.log(posts))
为.then(posts => this.setState({ posts }))
。
推荐阅读
- pandas - 使用 groupby 条件迭代 Pandas DataFrame 中的列
- ruby-on-rails - 通过 Rails 电子邮件元数据发送网格 SMTP
- reactjs - 我无法在 fullcalendar 上使用资源
- karate - 正确设置 Content-Type 时如何解决错误 415 Unsupported Media Type
- php - 如何使用 Eloquent 关系 - Laravel 获取嵌套表的数据?
- javascript - 使用 Tensorflow.js 开发游戏 AI
- mysql - mysql - 如果表中有多个具有相同值的条目,如何显示所有最大值?
- installation - 与团队共享 Visual Studio 安装选项
- java - Cloud Config 服务器响应的 Java 模型
- django - Django 表单:我无法从主页访问表单