我才刚刚开始学习Redux,但遇到了这个错误,似乎无法弄清楚哪里出了问题。在我的profileReducer.js文件中,我设置了initialState以使配置文件等于null。沿线某处发生故障,并且如果我未定义console.log(this.state)配置文件。
错误:
TypeError: Cannot read property 'profile' of undefined
Dashboard.render
src/components/dashboard/Dashboard.js:11
8 | this.props.getCurrentProfile();
9 | }
10 |
> 11 | render() {
12 | const { user } = this.props.auth;
13 | const { profile, loading } = this.props.profile;
14 |
profileReducer.js
import {
GET_PROFILE,
PROFILE_LOADING,
CLEAR_CURRENT_PROFILE
} from "../actions/types";
const initialState = {
profile: null,
profiles: null,
loading: false
};
export default function(state = initialState, action) {
switch (action.type) {
case PROFILE_LOADING:
return {
...state,
loading: true
};
case GET_PROFILE:
return {
...state,
profile: action.payload,
loading: false
};
case CLEAR_CURRENT_PROFILE:
return {
...state,
profile: null
};
default:
return state;
}
}
profileActions.js
import axios from "axios";
import {
GET_PROFILE,
PROFILE_LOADING,
CLEAR_CURRENT_PROFILE,
GET_ERRORS
} from "./types";
// Get current profile
export const getCurrentProfile = () => dispatch => {
dispatch(setProfileLoading());
axios
.get("/api/profile")
.then(res =>
dispatch({
type: GET_PROFILE,
payload: res.data
})
)
.catch(err =>
dispatch({
type: GET_PROFILE,
payload: {}
})
);
};
// Create Profile
export const createProfile = (profileData, history) => dispatch => {
axios
.post("/api/profile", profileData)
.then(res => history.push("/dashboard"))
.catch(err =>
dispatch({
type: GET_ERRORS,
payload: err.response.data
})
);
};
// Profile loading
export const setProfileLoading = () => {
return {
type: PROFILE_LOADING
};
};
// Clear profile
export const clearCurrentProfile = () => {
return {
type: CLEAR_CURRENT_PROFILE
};
};
Dashboard.js
import React, { Component } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import { getCurrentProfile } from "../../actions/profileActions";
class Dashboard extends Component {
componentDidMount() {
this.props.getCurrentProfile();
}
render() {
const { user } = this.props.auth;
const { profile, loading } = this.props.profile;
let dashboardContent;
if (profile === null || loading) {
dashboardContent = <h4>Loading</h4>;
} else {
dashboardContent = <h1>Hello</h1>;
}
return (
<div className="dashboard">
<div className="container">
<div className="row">
<div className="col-md-12">
<h1 className="display-4">Dashboard</h1>
{dashboardContent}
</div>
</div>
</div>
</div>
);
}
}
Dashboard.propTypes = {
getCurrentProfile: PropTypes.func.isRequired,
auth: PropTypes.object.isRequired,
profile: PropTypes.object.isRequired
};
const mapStateToProps = state => ({
profile: state.profile,
auth: state.auth
});
export default connect(
mapStateToProps,
{ getCurrentProfile }
)(Dashboard);
App.js
import React, { Component } from "react";
import "./App.css";
import Navbar from "./components/layout/Navbar";
import Footer from "./components/layout/Footer";
import Landing from "./components/layout/Landing";
import Login from "./components/auth/Login";
import Register from "./components/auth/Register";
import { BrowserRouter as Router, Route } from "react-router-dom";
import jwt_decode from "jwt-decode";
import setAuthToken from "./utils/setAuthToken";
import { setCurrentUser, logoutUser } from "./actions/authActions";
import { clearCurrentProfile } from "./actions/profileActions";
import { Provider } from "react-redux";
import store from "./store";
import Dashboard from "./components/dashboard/Dashboard";
// Check for token
if (localStorage.jwtToken) {
// Set auth token header auth
setAuthToken(localStorage.jwtToken);
// Decode token and get user info and exp
const decoded = jwt_decode(localStorage.jwtToken);
// Set user and isAuthenticated
store.dispatch(setCurrentUser(decoded));
// Check for expired token
const currentTime = Date.now() / 1000;
if (decoded.exp < currentTime) {
// Logout user
store.dispatch(logoutUser());
// clear current profile
store.dispatch(clearCurrentProfile());
// Redirect to login
window.location.href = "/login";
}
}
class App extends Component {
render() {
return (
<Provider store={store}>
<Router>
<div className="App">
<Navbar />
<Route exact path="/" component={Landing} />
<div className="container">
<Route exact path="/register" component={Register} />
<Route exact path="/login" component={Login} />
<Route exact path="/dashboard" component={Dashboard} />
</div>
<Footer />
</div>
</Router>
</Provider>
);
}
}
export default App;
store.js
import { createStore, applyMiddleware, compose } from "redux";
import thunk from "redux-thunk";
import rootReducer from "./reducers";
const initialState = {};
const middleware = [thunk];
const store = createStore(
rootReducer,
initialState,
compose(
applyMiddleware(...middleware),
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
)
);
export default store;
答案 0 :(得分:1)
index.js
export default combineReducers({
auth: authReducer,
errors: errorReducer,
profie: profileReducer
});
几个小时后.....教授应该是个人资料=)