未定义的TypeError:无法读取未定义的属性(读取'isAuthenticated')

Question

我试图为用户在创建帐户之前和之后创建指定链接。我得到了一个TypeError，但我不知道它是从哪里来的。我已经尝试了链接方法，看看这是否是问题的来源，但情况似乎并非如此。

该错误被插入，当我将支持im传递到组件时，将在其中初始化auth。

这是我的导航链接的代码

import { Fragment } from 'react'
import { Link } from "react-router-dom"
import { connect } from 'react-redux'
import PropTypes from 'prop-types'
import { logout } from '../../actions/auth'

//create links for when users are signed in

const Navbar = ({ auth: {isAuthenticated, loading} , logout}) => {

    const guest = (
        <div className="pr-8 md:block hidden">
                <Link className="p-4 hover:animate-pulse" to='/signup'>Sign up</Link>
                <Link className="p-4 hover:animate-pulse" to='/login'>Login</Link>
            </div>
    )

    const auth = (
        <div className="pr-8 md:block hidden">
                <Link className="p-4 hover:animate-pulse" to='/settings'>Settings</Link>
                <Link onClick={logout} className="p-4 hover:animate-pulse" to='/logout'>Logout</Link>
            </div>
    )

    return (
        <nav className="fixed bg-white shadow-sm h-16  w-full px-5 py-2 flex justify-between items-center font-mono text-lg">
        <Link to ='/login' className="pl-8">Logo</Link>
        <div className="px-4 cursor-pointer md:hidden">
        <svg 
          xmlns="http://www.w3.org/2000/svg" 
          className="h-6 w-6" 
          fill="none" 
          viewBox="0 0 24 24" 
          stroke="currentColor">
    <path 
      strokeLinecap="round" 
      strokeLinejoin="round" 
      strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
        </svg>
         </div>
            <div className="pr-8 md:block hidden">
            { !loading && (
              <Fragment>{ isAuthenticated ? auth : guest }</Fragment>
              ) 
            }
            </div>
        </nav>
    )
}

Navbar.propTypes = {
    logout: PropTypes.func.isRequired,
}

const mapStateToProps = (state) => ({
  auth: state?.auth
})

export default connect(mapStateToProps, { logout })(Navbar) 

这是我把isAuthenticated放在initialState里的第一个减速机。我有我所有的其他进口产品，但它们都无关紧要

import { 
    SIGNUP_SUCCESS,
    SIGNUP_FAIL,
    USER_LOADED,
    AUTH_ERROR,
    LOGIN_SUCCESS,
    LOGIN_FAIL,
    LOGOUT,
} from '../actions/types'

const initialState = {
    token: localStorage.getItem('token'),
    isAuthenticated: false,
    loading: true,
    user: null
}

export default function(state = initialState, action ) {

    const { type, payload } = action

    switch(type) {
        case USER_LOADED: 
            return {
            ...state,
            isAuthenticated: true,
            loading: false,
            user: payload
        }

        case SIGNUP_SUCCESS:
        case LOGIN_SUCCESS:
            localStorage.getItem('token', payload.token)
            return {
                ...state,
                ...payload,
                isAuthenticated: true,
                loading: false,
            }

        case LOGIN_FAIL:
        case SIGNUP_FAIL:
        case AUTH_ERROR:
        case LOGOUT:
            localStorage.removeItem('token')
            return {
                ...state,
                token: null,
                isAuthenticated: false,
                loading: false
            }
    
            default: 
            return state
    }
}

这是我的商店配置

import reducerData from '../reducers/auth'
import {applyMiddleware, createStore} from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension'
import thunk from 'redux-thunk'


const initialState = {}

const middleware = [thunk]

const store = createStore(reducerData, initialState, composeWithDevTools(applyMiddleware(...middleware)))

export default store

Answer 1

你的商店配置在哪里？也就是说，无论您在何处创建redux存储，您都将有一个根还原器(如果有多个还原器，通常是这样的话)，以及您在创建redux状态对象的属性名称时给出的名称，您可以通过这个名称在组件中访问它。也就是说，如果您使用的是redux工具包，那么你会像这样用。无论您在这里所指的是什么名称，当您执行mapStateToProps时，您的授权简化器都会被作为道具名。

我认为问题在于，您在存储配置中给它取了不同的名称，并且试图使用组件中的不同名称访问对象。

这就是为什么它要抛出错误

确保在组件中使用的名称与在redux状态对象中使用的名称相同。