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


  • 0

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


  • 0

    @TB 你本地代码是自己写了getPostData()了吗?


  • 0

    如果暂时不懂async/await的话,稍微看一下Promise,然后直接这样用:

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

  • 0

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

  • 0

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

    class Post extends Component {
    constructor () {
    super()
    this.state = {
    html: "数据加载中..."
    }
    }

    componentWillMount () {
    // 之前
    this.load();
    }

    load () {
    this.setState({
    html : "数据加载中..."
    });

    getPostData().then((postContent) => {
      if(postContent){
        this.setState({
          html : postContent
        });
      }else{
        this.setState({
          html : "数据加载失败"
        });
      };
    });
    

    }

    render () {
    return (
    <div>
    <div className='post-content'>
    {this.state.html}
    </div>
    <button onClick={this.load.bind(this)}>刷新</button>
    </div>
    )
    }

    }


  • 0

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

  • 0

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

  • 0

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

  • 0

    @ScriptOJ

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

    一直提示错误:数据加载完成以后应该显示 文章内容 63, 但你显示的是 数据加载中...
    不知道哪里错了...


  • 0

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

  • 0

    @jimbray

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

  • 0

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

    class Post extends Component {

    state = {
    txt: "数据加载中..."
    }

    componentWillMount() {
    this.postContent()
    }

    async postContent() {

    this.setState({txt: "数据加载中..."})
    
    let data = await getPostData()
    
    this.setState({txt: data})
    

    }

    render () {
    return (
    <div>
    <div className='post-content'>{this.state.txt}</div>
    <button onClick={this.postContent.bind(this)}>刷新</button>
    </div>
    )
    }
    }


  • 0

    @tim1020 this不绑定或者用箭头函数的话,是会指向运行时的上下文而不是定义时的,应该就会去找button里的_loadData函数,然后找不到,接触不久,不知道理解对不对


  • 0

    @悠然见南山#10 React.js 加载、刷新数据 中说:

    componentDidMount

    componentDidMount调用reload


  • 0

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

    this.state({
    data: response
    })

    this.state({
                data: response
    })
    

    setState写成state了


  • 0

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

登录后回复
 

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