zoukankan      html  css  js  c++  java
  • react之异步请求数据,render先行渲染报错,未拿到数据

    import React from 'react'
    import {connect} from 'react-redux'
    import { Redirect} from 'react-router-dom'
    import axios from 'axios'
    import {login} from './Auth.redux.js'
    
    //两个reducers 每个reducers都有一个state
    @connect(
        (state)=>state.auth,
        {login}
    )
    class Auth extends React.Component{
      constructor(props){
        super(props)
        this.state={
          data:{},
          success:false   //解决方法设置一个开关,当数据请求成功,置为true
        }
      }
        componentDidMount(){
          axios.get('/data')
            .then(res=>{
              if(res.status===200){
                this.setState({data:res.data,success:true})
                console.log(this.state.data[0].user)
                debugger
              }
            })
        }
        render(){
            return (
                <div>
                    <h2>我的名字是{this.state.success?this.state.data[0].user:''}</h2>
                    {this.props.isAuth?<Redirect to='/dashboard'></Redirect>:null}
                    <h2>你没有权限需要登录</h2>
                    <button onClick={this.props.login}>登录</button>
                </div>
            )
        }
    }
    
    export default Auth
    
    
  • 相关阅读:
    poj3181(Dollar Dayz)
    poj3666(Making the Grade)
    poj2392(Space Elevator)
    hdu5288(OO’s Sequence)
    hdu5289(Assignment)
    快学scala
    Spark Checkpointing
    Spark Performance Tuning (性能调优)
    Spark Memory Tuning (内存调优)
    Sparkstreaming and Kafka
  • 原文地址:https://www.cnblogs.com/raind/p/9607491.html
Copyright © 2011-2022 走看看