美文网首页
#10 React.js 加载、刷新数据

#10 React.js 加载、刷新数据

作者: 康乐芳华 | 来源:发表于2017-12-19 00:31 被阅读0次

完成 Post 组件,它可以加载、刷新文章内容。

已有函数 getPostData,它会返回一个 Promise,你可以通过它获取文章的内容。

getPostData().then((postContent) => {
  // ...
})

在获取数据的时候,Post 组件的 div.post-content 中显示 数据加载中...,完成加载以后直接显示 getPostData 的返回结果。

页面有个按钮,点击可以重新加载数据。

class Post extends Component {
  constructor () {
    super()
    this.state = { content: '' }
  }
  
  componentWillMount () {
    this._loadData()
  }
  
  async _loadData () {
    this.setState({ content: '数据加载中...' })
    const content = await getPostData()
    this.setState({ content })
  }
  
  render () {
    return (
      <div>
        <div className='post-content'>{this.state.content}</div>
        <button onClick={() => {
          this._loadData()
        }}>刷新</button>
      </div>
    )
  }
}

相关文章

  • #10 React.js 加载、刷新数据

    完成 Post 组件,它可以加载、刷新文章内容。 已有函数 getPostData,它会返回一个 Promise,...

  • Echarts、Flot渲染时序数据性能测试

    测试一:刷新页面时加载10W条时序数据 测试二:页面加载完成后,点击按钮加载10W条时序数据 测试三:下图分别为刷...

  • html 页面的优化处理(ajax)

    同步加载(刷新):每次刷新的是整个页面的数据 异步加载(刷新):每次刷新的是整个页面的部分数据 由于之前做公司内部...

  • day10-数据刷新02局部刷新

    数据刷新01全局刷新 reloadData - 全局刷新,屏幕能看见的cell的数据,全部再次加载. 局部刷新 :...

  • MUI重置上拉加载完美解决方案

    简述:mui混合开发遇到这样的问题解决好就,一个列表进行分页加载数据下拉刷新请求前10条数据,上拉加载如果大于10...

  • ios 关于数据源数组的赋值问题

    1、定义数据源 2、懒加载 3、刷新数据 请求会数据之后赋值 4、加载数据时

  • MG--自定义刷新控件

    在iOS开发中,我们经常要用到上拉刷新(加载最新数据)和下拉刷新(加载以前的数据),使用第三方框架MJRefres...

  • 下拉刷新1.0-- 控件

    0.0总结:下拉刷新的思路 获取的初始加载的数据:self.dataSourceArray; 2.加载更新的数据:...

  • 滚屏加载实现

    滚屏加载--无刷新动态加载数据技术的应用 关键代码(依赖jQuery)$(function(){ var winH...

  • 上下拉刷新

    一.上拉刷新 1.为什么要做上拉刷新? 想要看一些旧的(更多)数据,就需要上拉刷新,加载更多数据 2.上拉刷新永远...

网友评论

      本文标题:#10 React.js 加载、刷新数据

      本文链接:https://www.haomeiwen.com/subject/pxzmwxtx.html