javascript - 未捕获的类型错误 : Cannot read property 'uid' of undefined

Question

使用 reactjs、firebase (google auth)、react-router 和 redux 设置身份验证。

问题很简单，但我找不到任何在线资源或答案来修复它。

无法读取 uid(带 firebase 的用户 ID)的属性，因为它告诉我它未定义？我已将此设置为 Private routes 是一个新组件，并且已导入到我的应用程序路由器中。我也计划有一条公共(public)路线。

这是我的代码以及错误的屏幕截图。

PrivateRoute.js

import React from 'react';
import { connect } from 'react-redux';
import { Route, Redirect } from 'react-router-dom';

export const PrivateRoute = (props) => (
    <Route {...props} />
  );

const mapStateToProps = (state) => ({
  isAuthenticated: !!state.auth.uid <-error on this uid
});

export default connect(mapStateToProps)(PrivateRoute);

AppRouter.js

import PrivateRoute from './PrivateRoute'

<Route path="/" component={Login} exact={true}/>
<PrivateRoute path="/dashboard" component={Dashboard} />
<PrivateRoute path="/create" component={AddExp}/>

登出并尝试访问/create 私有(private)路由时的错误截图

已更新以添加 redux store 配置文件

import authenticationReducer from '../reducers/authentication'

export default () => {
    const store = createStore(
        combineReducers({
            expenses: expensesReducer,
            authentication: authenticationReducer
        }),
        composeEnhancers(applyMiddleware(thunk))
    );
    return store;
};

Auth reducer(以防万一)

export default (state = {}, action) => {
    switch (action.type) {
        case 'LOGIN':
        return {
            uid: action.uid
        };
        case 'LOGOUT':
        return {

        };
        default:
        return state;
    }
};

Answer 1

Cannot read property 'uid' of undefined - 意味着您正在尝试类似 variable.uid 而 variable 未定义。根据错误行，state.auth 未定义。

你应该能够在那里查看你的状态，调试或只是在你的 mapStateToProps 中抛出一个 console.log 来查看你的状态实际上是什么样的:

const mapStateToProps = (state) => {
  console.log('state:', state); // see what state is
  return {
    isAuthenticated: !!state.auth.uid <-error on this uid
  };
}

查看 combineReducers 似乎是将 authenticationReducer 的结果放到 state.authentication 上，而不是 state.auth ...

combineReducers({
    expenses: expensesReducer,
    authentication: authenticationReducer
}),