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


  • 4

    贴一个没用 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>
        )
      }
    }
    

  • 1

    // 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 已经可以直接使用 哪里来的直接使用啊
    怎么引入的还是自己写的,头有点晕。。。。。


  • 0

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

  • 0

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

  • 0

    class Post extends Component {
      state ={
        fetching: false,
        content: ''
      }
      
      componentWillMount() {
        this.getData()
      }
       
      getData = async () => {
         this.setState({
          fetching: true
        })
        var data = await getPostData()
        this.setState({
          content: data,
          fetching: false
        })
      }
      
      render () {
        var { content, fetching } = this.state
        return (
          <div>
            <div className='post-content'>
              { fetching ? '数据加载中...' : content }
            </div>
            <button onClick={this.getData}>刷新</button>
          </div>
        )
      }
    }
    

  • 0

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

  • 0

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

  • 0

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

登录后回复
 

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