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 ...
随机推荐
- (binary_search) Can you find it hdu2141
Can you find it? Time Limit: 10000/3000 MS (Java/Others) Memory Limit: 32768/10000 K (Java/Others ...
- bootstrap3 input 验证样式【转】
feedback <form role="form"> <div class="form-group has-success has-feedback& ...
- 源码分析之CountDownLatch
https://www.cnblogs.com/leesf456/p/5406191.html
- java AOP使用配置项来进行注入实践
java AOP使用注解@annotation方式实践 场景: 在目标方法前面和后面执行通知方法 目标类 @Component public class Play { public void watc ...
- .NET面试题系列(十一)WinDbg、Perfmon
WinDbg 资料 https://www.cnblogs.com/sheng-jie/p/9503650.html https://www.cnblogs.com/yudongdong/p/9701 ...
- [译]Quartz.NET 框架 教程(中文版)2.2.x 之第七课 触发监听器和作业任务监听器
第七课:触发监听器和作业任务监听器 监听器是在调度器中基于事件机制执行操作的对象.你大概可以猜到,触发监听器接收响应跟触发器有关的事件,作业任务监听器接收响应跟作业任务有关的事件. 跟触发器有关的事件 ...
- ELF格式探析之三:sections
前文链接: ELF格式探析之一:Segment和Section ELF格式探析之二:文件头ELF Header详解 今天我们讲对目标文件(可重定位文件)和可执行文件都很重要的section. 我们在讲 ...
- Netty入门(1) - 简介
什么是Netty? Netty 是一个利用 Java 的高级网络的能力,隐藏其背后的复杂性而提供一个易于使用的 API 的客户端/服务器框架. Tomcat和Netty有什么区别? Netty和Tom ...
- Ubuntu16.04安装搜狗拼音输入法(中文输入法)
虽然网上有很多教程,但是我觉得我的很适合那些真正的小白... 1.下载文件 由于我要给多台电脑安装搜狗输入法,所以用的是文件夹安装,不是命令行安装. 打开官网http://pinyin.sogou.c ...
- bootstrap-table前端修改数据
使用bootstrap-table显示数据,后台传回数据以后,可能需要对其做调整,如需要前端为数据添加单位 调整数据代码 $("#"+tableId).bootstrapTable ...