Question

我正试图将状态传递给reducer，但不确定为什么我无法检索该值。我收到以下错误

×未处理的拒绝（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时提供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);

编辑是否可能返回false，因为auth：true是一个对象，而不是实际的布尔值？

Answer 1

这里出现每个图片错误

action.response.data.auth

，然后在您的代码中将其更改为

action.data.response.auth

您应该在reducer action.data.auth

中接收数据

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

   })

Redux没有将状态传递给reducer

1 个答案: