React+Electron 桌面应用开发文章索引
这一篇介绍 React 网站开发过程中如何发起 http 请求, 从服务端获取数据.
准备工作
安装 superagent 模块, 这是一个可以从服务器获取 get 数据或者把数据推送 post 到服务器的工具:
zhyuzh$ cnpm i superagent --save-dev
superagent 官方开源项目地址 https://github.com/visionmedia/superagent
在 dist 目录下创建一个 datas/mydata.js 用于放置文件, 代替服务器接口返回的数 json 数据, 所以最好使用严格的 json 格式, 字段名都带双引号, 最后一个字段后面不带逗号:
- [{
- "title": "标题 1",
- "text": "文字内容 1"
- },{
- "title": "标题 2",
- "text": "文字内容 2"
- }]
发起 get 请求
当元素被添加到页面时候, 发起请求, 注意这里使用 JSON 对数据进行了转换.
获取数据之后, 使用 setState 能够让数据立即生效.
HomePage.js 中修改的部分:
- componentDidMount() {
- let that = this
- superagent.get('datas/mydata.js')
- .end((err, res) => {
- that.setState({
- mylist: JSON.parse(res.text)
- })
- })
- }
在 render() 方法中, 如果使用了 mylist 数据生成元素 (比如用一个 list 生成多个重复界面元素),setState 会在数据读取完成后自动刷新这些元素.
类似下面的代码:
- let rightItems = []
- for (let i = 0; i < this.state.articleList.length; i++) {
- let data = this.state.articleList[i]
- rightItems.push(h(Grid, {
- item: true,
- xs: 12,
- sm: 6,
- md: 4,
- lg: 3,
- }, [
- h(Card, {
- className: CSS.card
}, h(CardContent, {}, [
- h(CardMedia, {
- image: data.image,
- className: css.cardMedia
- }),
- h(CardContent, {
- style: {
- padding: 0
- },
- }, data.title)
- ]))
- ]))
- }
致力于让一切变得简单
如果您发现文章错误, 请不吝留言指正;
如果您觉得有用, 请点喜欢;
来源: http://www.jianshu.com/p/f05dadec2cf9