我尝试在用户创建帐户之前和之后为他们创建指定链接。我收到 TypeError，但我无法检测它究竟来自何处。我尝试了链接方法来查看问题是否来自那里，但似乎并非如此。

错误插入在我将 auth 初始化为传递给组件的 props 的地方。

这是我的导航链接的代码

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) 

这是我的 auth 减速器，其中我在 initialState 中保存 isAuthenticated。我包含了所有其他导入，但它们无关紧要

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