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


  • 0
    administrators

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

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

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

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

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


  • 0

    这道题的async/await应该怎么写呢。。


  • 0
    administrators

    @an-l

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

  • 1

    @胡子大哈 谢谢~


  • 0

    // getPostData 已经可以直接使用
    // 小提示:本系统可以直接 async/await
    
    class Post extends Component {
      constructor(props) {
        super(props)
        this.state = {
          content: '',
        }
        
        this.handleRefresh = this.handleRefresh.bind(this)
      }
      
      async handleRefresh() {
        this.setState({
          content: '数据加载中...'
        })
        const data = await getPostData()
        this.setState({
          content: data
        })
      }
      
      componentWillMount() {
        this.handleRefresh()
      }
      render () {
        return (
          <div>
            <div className='post-content'>{this.state.content}</div>
            <button onclick={this.handleRefresh}>刷新</button>
          </div>
        )
      }
    }
    

    为什么提示进入页面没有加载数据???
    求助!!!


  • 0
    administrators

    @xzzzzz 刚刚系统有问题,现在已经应该好了


  • 2

    贴一个没用 ASYNC/AWAIT 的 CODE

    ### 刚刚忘记用markdown了
    
    class Post extends Component {
      constructor(){
        super()
        this.state = {
          load: '数据加载中...'
        }
      }
      componentDidMount() {
        getPostData().then(postContent => {
          this.setState({
            load: postContent
          })
        })
      }
      reload() {
        this.setState({
          load: '数据加载中...'
        })
        getPostData().then(postContent => {
          this.setState({
            load: postContent
          })
        })
      }
      render () {
        const { load }= this.state
        return (
          <div>
            <div className='post-content'>{load}</div>
            <button onClick={this.reload.bind(this)}>刷新</button>
          </div>
        )
      }
    }
    

  • 0

    // getPostData 已经可以直接使用
    // 小提示:本系统可以直接 async/await
    
    class Post extends Component {
      constructor(props) {
        super(props)
        this.state = {
          content: '',
        }
      }
      
      handleRefresh() {
        this.setState({content:"正在加载中"})
        getPostData().then((data) => {
            if(data === "") return 
            this.setState({content:data})
        })
      }
      
      componentWillMount() {
        this.handleRefresh()
      }
      
      render () {
        return (
          <div>
            <div className='post-content'>{this.state.content}</div>
            <button onclick={this.handleRefresh.bind(this)}>刷新</button>
          </div>
        )
      }
    }
    

    报了进入时没有提示加载文字的错误,但我本地代码能跑通


  • 0
    administrators

    @TB

    中显示 数据加载中...

    不是正在加载中


  • 0

    // getPostData 已经可以直接使用
    // 小提示:本系统可以直接 async/await
    
    class Post extends Component {
       constructor() {
            super()
            this.state = {
                postContent: '数据加载中...',
            }
        }
      componentWillMount(){
        this.load()
      }
      
      load = () =>{
        this.setState({
          postContent: '数据加载中...',
        })
        getPostData().then((postContent) => {
          this.setState({
            postContent:postContent
          })
        })
      }
      render () {
        return (
          <div>
            <div className='post-content'>{this.state.postContent}</div>
            <button onClick={this.load.bind(this)}>刷新</button>
          </div>
        )
      }
    }
    

  • 0

    @ScriptOJ 突然看到这个作业就懵逼了,没学过异步阿........


  • 0

    // getPostData 已经可以直接使用
    // 小提示:本系统可以直接 async/await
    
    class Post extends Component {
      constructor(props){
        super(props);
        this.state={
          postContent:'数据加载中...'
        }
      }
      componentWillMount(){
        this.change();
      }
      change = ()=>{
        this.setState({postContent:'数据加载中...'})
        getPostData().then((postContent)=>{
          this.setState({postContent})
        })
      }
      render () {
        return (
          <div>
            <div className='post-content'>{this.state.postContent}</div>
            <button onCilck={this.change}>刷新</button>
          </div>
        )
      }
    }
    

    怎么总是提交不了
    总显示“点击刷新的时候应该显示 数据加载中...,但你显示的是 文章内容 2
    求大神解释


  • 0

    class Post extends Component {
      constructor() {
        super();
    
        this.state = {
          data: ''
        }
      }
    
      componentWillMount() {
        this
          .getPostData()
          .then((data) => {
            this.setState({data: data})
          })
      }
    
      async getPostData() {
        this.setState({data: '数据加载中...'});
        let pro = await new Promise((resolve, reject) => {
          setTimeout(() => {
            let data = Math
              .random(2)
              .toString(36)
              .substr(0, 16)
            resolve(data);
          }, 2000)
        })
        return pro;
      }
    
      handlerRefresh() {
        this
          .getPostData()
          .then((data) => {
            this.setState({data: data})
          })
      }
    
      render() {
        return (
          <div>
            <div>
              <div className='post-content'>{this.state.data}</div>
              <button onClick={() => {
                this.handlerRefresh()
              }}>刷新</button>
            </div>
          </div>
        )
      }
    
    }
    
    貌似最开始没看题目, 不过 这样也应该米问题吧

  • 0

    @执念#10 React.js 加载、刷新数据 中说:

    @ScriptOJ 突然看到这个作业就懵逼了,没学过异步阿........

    嗯,这个是有点难,我昨天找了阮一峰的Promise对象那章看了,还是不太懂


  • 0

    @ScriptOJ 为啥我这个提示我“进入页面的时候你没有开始加载数据”

    class Post extends Component {
        constructor() {
            super();
            this.state = {
                content: ''
            }
        }
    
        getPostData() {
            return new Promise((resolve, reject) => {
                setTimeout(resolve, 1000, '已经加载完返回~')
            })
        }
    
        loader = async function() {
            this.setState({
                content: '数据加载中...'
            });
    
            await this.getPostData().then((value) => {
                this.setState({
                    content: value
                })
            });
    
        };
    
        componentWillMount(){
            return this.loader();
        }
    
        render () {
            return (
                <div>
                    <div className='post-content'>{ this.state.content }</div>
                    <button onClick={ this.loader.bind(this) }>刷新</button>
                </div>
            )
        }
    }
    
    

  • 0

    # code block
    // getPostData 已经可以直接使用
    // 小提示:本系统可以直接 async/await
    class Post extends Component {
      constructor(){
        super();
        this.state = {
          data:null
        }
      }
      componentWillMount(){
        this.data();
      }
      data(){
        this.setState({data:"数据加载中..."});
        getPostData().then((postContent) => {
          this.setState({data:postContent});
        })
      }
      render () {
        return (
          <div>
            <div className='post-content'>{this.state.data}</div>
            <button onClick={()=>{this.data();}}>刷新</button>
          </div>
        )
      }
    }
    

    没有用到async/await,这样写感觉是不是有点蠢


  • 0

    贴一个没用async/await的~

    // getPostData 已经可以直接使用
    // 小提示:本系统可以直接 async/await

    class Post extends Component {
    constructor(){
    super()
    this.state = {
    data : null
    }
    }
    fillContentToData(){
    getPostData().then( (postContent)=>{
    this.setState({
    data : postContent
    })
    })
    }
    refreshData(){
    this.setState({
    data : null
    })
    this.fillContentToData()
    }
    componentWillMount(){
    this.setState({
    data : null
    })
    }
    componentDidMount(){
    this.fillContentToData()
    }
    render () {
    return (
    <div>
    <div className='post-content'>
    {this.state.data?this.state.data:'数据加载中...'}
    </div>
    <button onClick={this.refreshData.bind(this)}>刷新</button>
    </div>
    )
    }
    }


  • 0

    class Post extends Component {
      constructor(){
        super();
        this.state={
          content:''
        }
      }
      componentWillMount(){
        this.setState({content:'数据加载中...'});
      }
      handleClick(){
        this.setState({content:'数据加载中...'});
        getPostData().then((postContent) => {
          this.setState({content:postContent});
        })
      }
      componentDidMount(){
         getPostData().then((postContent) => {
          this.setState({content:postContent});
        })
      }
      render () {
        return (
          <div>
            <div className='post-content'>{this.state.content}</div>
            <button onClick={this.handleClick.bind(this)}>刷新</button>
          </div>
        )
      }
    }
    
    

  • 0

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

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

    // getPostData 已经可以直接使用
    // 小提示:本系统可以直接 async/await

    Failed to compile
    ./src/ComponentPost.js
    Line 15: 'getPostData' is not defined no-undef
    Line 20: 'getPostData' is not defined no-undef

    Search for the keywords to learn more about each error.
    This error occurred during the build time and cannot be dismissed.

    这getPostData报错,怎么引入的。。。。。。


  • 0

    @liyang // getPostData 已经可以直接使用 哪里来的直接使用啊
    怎么引入的还是自己写的,头有点晕。。。。。


登录后回复
 

与 ScriptOJ 的连接断开,我们正在尝试重连,请耐心等待