【问题标题】:Redux is not passing state to reducerRedux 没有将状态传递给 reducer
【发布时间】:2019-02-21 21:04:47
【问题描述】:

我正在尝试将状态传递给减速器,但我不确定为什么我无法检索到该值。我收到以下错误

×未处理的拒绝(TypeError):无法读取属性“数据” 未定义

动作

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 时呈现假

前端

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);

编辑是否会返回 false,因为 auth:true 是一个对象而不是实际的布尔值?

【问题讨论】:

  • 根据错误 action.response 未定义。确保`const data = response.data;`中的数据给你一个值
  • 您的意思是等待 url 吗?您已经在上一行等待
  • 它确实给出了一个值
  • auth:true 它呈现
  • 你正在传递dispatch({type: GET_CURRENT_USER, data}),所以不是action.data.auth吗?您是否尝试过控制台记录操作的价值?这将是第一件事

标签: reactjs redux


【解决方案1】:

这里出现图片错误

action.response.data.auth

并在您的代码中将其更改为

action.data.response.auth

你应该在 reducer action.data.auth 中接收数据

case GET_CURRENT_USER:
   return({
      ...state,
      isAuthenticated2: action.data.auth

   })

【讨论】:

  • 我试过了,它仍然呈现错误,我更新了帖子。我认为问题是因为我从一个对象中获取,我会使用对象键还是什么?
  • 仍然没有任何改变。
  • 无论如何它似乎都不会更新状态。 console.log(data) 肯定会呈现一个值。
  • 您使用哪个库进行异步操作?重击?并尝试在 reducer 中记录操作以了解接收哪种数据类型
  • 不接受作为答案,我认为这是快递的后端问题。谢谢戴维蒂 :)
猜你喜欢
  • 1970-01-01
  • 2019-02-17
  • 2022-01-13
  • 1970-01-01
  • 2019-04-01
  • 2017-08-12
  • 2020-10-29
  • 2017-10-18
  • 2020-11-10
相关资源
最近更新 更多