react从服务器请求文件,React-Request-Get-发起http请求

这一篇介绍React网站开发过程中如何发起http请求，从服务端获取数据。

准备工作

安装superagent模块,这是一个可以从服务器获取get数据或者把数据推送post到服务器的工具：

zhyuzh$ cnpm i superagent --save-dev

在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)

]))

]))

}

致力于让一切变得简单

如果您发现文章错误，请不吝留言指正；

如果您觉得有用，请点喜欢；

如果您觉得很有用，欢迎转载~

END