我使用的是ReactJS。 我通过在app.js中获取登录的用户信息来传递道具。 但是我得到了如下的错误。 我哪里犯错了。
我已经研究了几天了。 他以前在工作。 我找不到哪里出错了。 你能帮我吗?
文件的内容如下
export const USER_INFO = "USER_INFO";
export function userAction(newValue) {
return {
type: USER_INFO,
payload: {
profile: newValue
}
};
}
export function getUserInfo() {
return async dispatch => {
await fetch(`${process.env.REACT_APP_APISERVER}/api/account/me`, {
headers: {
Authorization: `Bearer ${localStorage.getItem("id_token")}`,
"Content-Type": "application/json"
}
})
.then(function(response) {
return response.json();
})
.then(function(jsonData) {
dispatch(userAction(jsonData));
//console.log(jsonData)
return JSON.stringify(jsonData);
})
.then(function(jsonStr) {
//console.log(jsonStr)
});
}
}
文件的内容如下
import React, { Component } from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import {updateCustomer } from "../src/components/helpers/actions/customerActions";
import { getUserInfo } from "../src/components/helpers/actions/userAction";
import { connect } from "react-redux";
import './scss/style.scss';
import AuthService from "./components/helpers/AuthService";
const loading = (
<div className="pt-3 text-center">
<div className="sk-spinner sk-spinner-pulse"></div>
</div>
);
const TheLayout = React.lazy(() => import('./containers/TheLayout'));
const Login = React.lazy(() => import('./views/pages/login/Login'));
const Register = React.lazy(() => import('./views/pages/register/Register'));
const Page404 = React.lazy(() => import('./views/pages/page404/Page404'));
const Page500 = React.lazy(() => import('./views/pages/page500/Page500'));
class App extends Component {
constructor(props) {
super(props);
this.Auth = new AuthService();
}
componentDidMount() {
this.props.onUpdateCustomer({id: "-1", customerKey: "-1", userKey: "-1"});
if (this.Auth.loggedIn() === true) {
this.props.onGetUserInfo();
}
}
render() {
return (
<BrowserRouter>
<React.Suspense fallback={loading}>
<Switch>
<Route exact path="/login" name="Login Page" render={props => <Login {...props}/>} />
<Route exact path="/register" name="Register Page" render={props => <Register {...props}/>} />
<Route exact path="/404" name="Page 404" render={props => <Page404 {...props}/>} />
<Route exact path="/500" name="Page 500" render={props => <Page500 {...props}/>} />
<Route path="/" name="Home" render={props => <TheLayout {...props}/>} />
</Switch>
</React.Suspense>
</BrowserRouter>
);
}
}
const mapStateToProps = (state) => {
return state;
};
const mapDispatchToProps = {
onUpdateCustomer: updateCustomer,
onGetUserInfo: getUserInfo
};
export default connect(mapStateToProps, mapDispatchToProps) (App );
index.js
import 'react-app-polyfill/ie11'; // For IE 11 support
import 'react-app-polyfill/stable';
import './polyfill'
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { icons } from './assets/icons'
import store from './store'
import { transitions, positions, Provider as AlertProvider } from 'react-alert'
import AlertTemplate from 'react-alert-template-basic'
import { Provider } from 'react-redux';
import ReactNotification from 'react-notifications-component';
import 'react-notifications-component/dist/theme.css'
import {applyMiddleware, combineReducers, compose, createStore} from "redux";
import customerReducer from "./components/helpers/reducers/customerReducer";
import userReducer from "./components/helpers/reducers/userReducer";
import appointmentsReducer from "./components/helpers/reducers/appointmenstReducer";
import thunk from "redux-thunk";
React.icons = icons;
const options = {
position: positions.BOTTOM_RIGHT,
timeout: 5000,
offset: '1px',
transition: transitions.SCALE,
};
const rootReducers = combineReducers({
customerInfo: customerReducer,
account_profile: userReducer,
appointmentsList: appointmentsReducer
});
const allEnhancers = compose(
applyMiddleware(thunk)
);
const store2 = createStore(
rootReducers,
allEnhancers
);
ReactDOM.render(
<Provider store={store2}>
<Provider store={store}>
<AlertProvider template={AlertTemplate} {...options}>
<ReactNotification/>
<App/>
</AlertProvider>
</Provider>
</Provider>,
document.getElementById('root')
);
serviceWorker.unregister();
store.js
import {createStore} from 'redux'
const initialState = {
sidebarShow: 'responsive'
};
const changeState = (state = initialState, { type, ...rest }) => {
switch (type) {
case 'set':
return {...state, ...rest };
default:
return state
}
};
const store = createStore(changeState);
export default store
您可以使用redux中间件。 尝试redux-thunk