Reactjs Redux未将状态传递给reducer
我试图将状态传递给reducer,我不确定为什么无法检索该值。我得到以下错误 ×未处理的拒绝(TypeError):无法读取的属性“数据” 未定义 行动Reactjs Redux未将状态传递给reducer,reactjs,redux,Reactjs,Redux,我试图将状态传递给reducer,我不确定为什么无法检索该值。我得到以下错误 ×未处理的拒绝(TypeError):无法读取的属性“数据” 未定义 行动 export const getUser = () => { return async (dispatch) => { const url = await Axios.get(process.env.REACT_APP_GET_USER); const response = await url;
export const getUser = () => {
return async (dispatch) => {
const url = await Axios.get(process.env.REACT_APP_GET_USER);
const response = await url;
const data = response.data; // renders auth:true or auth:false
if(response){
dispatch({type: GET_CURRENT_USER, data})
}
}
}
减速器
const initialState = {
authError: null,
isAuthenticated:localStorage.getItem('auth'),
githubAuth:localStorage.getItem('gitAuth'),
token: null,
user: [],
isAuthenticated2:false,
redirectPath: null
}
case GET_CURRENT_USER:
return({
...state,
isAuthenticated2:action.data.response.auth
})
执行this.props.getUser
时呈现false
前端
import React, { Component } from 'react';
// import axios from 'axios';
import Navbar from './components/layout/Navbar';
import { withStyles } from '@material-ui/core/styles';
import {compose} from 'redux';
import { connect } from 'react-redux';
import { getUser, setCurrentUser} from './actions/';
import setAuthToken from './setAuthToken';
import jwt_decode from 'jwt-decode';
import Axios from './Axios';
import { runInThisContext } from 'vm';
const styles = theme => ({
root: {
flexGrow: 1,
padding: 20
},
paper: {
padding: theme.spacing.unit * 2,
textAlign: 'center',
color: theme.palette.text.secondary,
},
chip: {
margin: theme.spacing.unit,
},
});
class App extends Component {
constructor(props){
super(props);
this.state = {
user: "",
isAuthenticated: false,
}
}
componentWillMount(){
if (localStorage.auth != null) {
// Set auth token header auth
setAuthToken(localStorage.auth);
const token = localStorage.getItem('auth');
// // Decode token and get user info and exp
const decoded = jwt_decode(token);
// console.log(decoded);
// // Set user and isAuthenticated
this.props.setCurrentUser(decoded);
}
this.props.getUser();
console.log(this.props.isAuthenticated2);
}
render() {
const { classes, isAuthenticated } = this.props;
return (
<div className="App">
<Navbar />
</div>
);
}
}
const mapStateToProps = (state) => ({
isAuthenticated: state.user.isAuthenticated,
isAuthenticated2: state.user.isAuthenticated2
})
const mapDispatchToProps = (dispatch) => ({
getUser: () => dispatch (getUser()),
setCurrentUser: () => dispatch( setCurrentUser()),
});
export default compose(connect(mapStateToProps, mapDispatchToProps), withStyles(styles))(App);
import React,{Component}来自'React';
//从“axios”导入axios;
从“./components/layout/Navbar”导入导航栏;
从“@material ui/core/styles”导入{withStyles}”;
从'redux'导入{compose};
从'react redux'导入{connect};
从“/actions/”导入{getUser,setCurrentUser};
从“/setAuthToken”导入setAuthToken;
从“jwt解码”导入jwt_解码;
从“/Axios”导入Axios;
从“vm”导入{runInThisContext};
常量样式=主题=>({
根目录:{
flexGrow:1,
填充:20
},
论文:{
填充:theme.space.unit*2,
textAlign:'中心',
颜色:theme.palete.text.secondary,
},
芯片:{
边距:theme.space.unit,
},
});
类应用程序扩展组件{
建造师(道具){
超级(道具);
此.state={
用户:“”,
I认证:错误,
}
}
组件willmount(){
if(localStorage.auth!=null){
//设置身份验证令牌头身份验证
setAuthToken(localStorage.auth);
const-token=localStorage.getItem('auth');
////解码令牌并获取用户信息和exp
const decoded=jwt_decode(令牌);
//控制台日志(已解码);
////设置用户并进行身份验证
this.props.setCurrentUser(已解码);
}
this.props.getUser();
console.log(this.props.isAuthenticated2);
}
render(){
const{classes,isAuthenticated}=this.props;
返回(
);
}
}
常量mapStateToProps=(状态)=>({
isAuthenticated:state.user.isAuthenticated,
isAuthenticated2:state.user.isAuthenticated2
})
const mapDispatchToProps=(调度)=>({
getUser:()=>dispatch(getUser()),
setCurrentUser:()=>调度(setCurrentUser()),
});
导出默认组合(connect(mapStateToProps、mapDispatchToProps)、withStyles(styles))(应用程序);
Edit是否会返回false,因为auth:true是一个对象而不是实际的布尔值
根据图像,此处发生错误
action.response.data.auth
在代码中,将其更改为
action.data.response.auth
您应该在reducer action.data.auth中接收数据
case GET_CURRENT_USER:
return({
...state,
isAuthenticated2: action.data.auth
})
根据错误
操作。响应未定义。确保`const data=response.data;`给你一个值你想等待url吗?您已经在前一行中执行等待它确实给出了一个值auth:true
it renders您正在传递dispatch({type:GET\u CURRENT\u USER,data})
,那么它不是action.data.auth
?您是否尝试将操作的值记录到控制台日志中?这将是我做的第一件事,我试过了,它仍然呈现假,我更新了帖子。我想问题是因为我从objectt获取,我会使用对象键还是什么?仍然没有任何变化。无论发生什么,它似乎都不会更新状态console.log(数据)
确实呈现一个值。异步操作使用哪个库?砰?并尝试在reducer中记录操作,以了解receivingill接受哪个数据类型作为答案,我认为这是express的后端问题。谢谢大卫:)