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

react之异步请求数据，render先行渲染报错，未拿到数据的更多相关文章

MO拆分计划行程序中写入PRODUCTIONORDERS表数据出现重复导致报错（BUG）20180502
错误提示:ORA-00001: 违反唯一约束条件 (ABPPMGR.C0248833319_6192)ORA-06512: 在 "STG.FP_MO_SPLIT", line 19 ...
ThinkPHP查询数据的时候toArray()报错解决办法
当查找不到数据时toArray()会报错,如图解决办法:先查找数据,然后加个判断,如果有数据再转化为数组,如果没有数据就给个空值,不想代码继续往下执行就return false;
16 react 发送异步请求获取数据和使用Redux-thunk中间件进行 ajax 请求发送
1.发送异步请求获取数据 1.引入 axios ( 使用 yarn add axios 进行安装 ) import axios from 'axios'; 2. 模拟在元素完成挂载后加载数据并初始 ...
关于html异步加载外部json文件报错问题
一. HTML代码如下: 参考网站(echarts-JSON请求数据):https://blog.csdn.net/you23hai45/article/details/51585506 <!D ...
RedisCluster的rename机制失败报错，解决又是数据倾斜问题
需求说明:spring session中的用户session更新是更新key的名字,所以对于key的操作时需要用newkey 替换oldkey value值只允许存在一个,这里用到rename就很合适 ...
服务端返回的json数据，导致前端报错的原因及解决方法
前言最近在开发的过程中遇到了一个问题:后端传过来的json字符串不是标准的json字符串导致报错的原因后端传过来的json字符串中包含一些不标准的字符或错误的引号嵌套 1)\n 2) \r 3) ...
MySQL中使用group_concat()函数数据字符过长报错的问题解决方法
最近在办公软件项目,在开发权限指标遇到一个问题:我们系统的一些逻辑处理是用存储过程实现的,但是有一天客户反馈说权限指标分配报错,查了分配的权限数据牵扯到的数据权限基础资源,没有问题.权限指标分配的存储 ...
Python 在已创建的数据表添加字段报错问题
django.db.utils.IntegrityError: (1062, “Duplicate entry ’1234567891011’ for key_’dingdanid’”) 这个错误是之 ...
el-table-column v-if条件渲染报错h.$scopedSlots.default is not a function
我们在实际项目中经常会遇到el-table-column条件渲染出现报错的情况报错内容: h.$scopedSlots.default is not a function 究其原因,是因为表格是el ...

随机推荐

MongoDB学习笔记~自己封装的Curd操作(查询集合对象属性,更新集合对象)
回到目录我不得不说,mongodb官方驱动在与.net结合上做的不是很好,不是很理想,所以,我决定对它进行了二次封装,这是显得很必然了,每个人都希望使用简单的对象,而对使用复杂,麻烦,容易出错的对象 ...
android整体架构概述--①
android的logo 是由设计师去厕所时来的灵感. 其中android的命名都是以甜点的名字来定的. android的系统一共有四层. 1.Linux内核和驱动层 2.函数库由C或C++编写 ...
plsql 建立oracle作业
--.plsql中学习job --学习job --建表 create table test_job(para_date date); commit; insert into test_job valu ...
Delphi集合的用法
参考:http://www.cnblogs.com/doit8791/archive/2012/08/17/2644859.html 集合是Pascal特有的数据类型,在Visual Basic.C/ ...
黑马程序员_Java基础：实现多线程对共有数据的同步操作
------- android培训.java培训.期待与您交流! ---------- 实现多线程对共有数据的同步操作,主要涉及到多线程和同步. 虽然都是基础,但是这把刀还是要用熟练,等到使用的时候才 ...
处理HTTP状态码
1.1.4 处理HTTP状态码上一节介绍HttpClient访问Web资源的时候,涉及HTTP状态码.比如下面这条语句: int statusCode=httpClient.executeMeth ...
php 实现传入参数的传出
类似于.net的out功能,php中可以使用&实现如下示例: <?php$x=2; inOutFunction($x); function inOutFunction(&$x) ...
json转换成list map集合
import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Set; i ...
飞信免费邮件api,飞信界面
大家都知道飞信是能够免费发送短信的,可是飞信又没有官方的接口,所以无法借用移动的官方接口实现短信的免费发送,可是还是有一些破解的接口能够使用的. GET方法: 提交格式 http://66.zzuob ...
Go Global 之怎样在全球Azure上使用Azure Free Account
随着中国用户出海的越来越多,同学们自学Azure Global 功能的积极性也越来越高.怎样开启Azure Global 账号,有哪些Global Azure的功能可以免费使用,能不能用国内的信用卡和 ...