Question

我已经很久没有收到这个错误了，我也不知道如何解决这个问题

PrivateRoute组件，在使用mapstatetoprops时会从存储中获取未定义的值

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


export const PrivateRoute = ({ isAuthenticated, component: Component, ...rest}) => (
    <Route {...rest} component={(props) => (
        isAuthenticated ? (
            <Component {...props} />
            ) : (
            <Redirect to="/" />
            )
    )} />
);


const mapStateToProps = (state) => {
  return {
    isAuthenticated: !!state.auth.uname
  };
};
export default connect(mapStateToProps)(PrivateRoute);

AppRouter组件，该组件使用PrivateRoute隐藏一些秘密路由以防止未经授权的访问。

import React from 'react';
import { Router, Route, Switch} from 'react-router-dom';
import createHistory from 'history/createBrowserHistory';
import Nav from '../components/navigation/nav';
import Index from '../components/index';
import SignIn from '../components/signin/signin';
import Register from '../components/register/register';
import Home from '../components/home/home';
import { PrivateRoute } from './PrivateRoute';

export const history = createHistory();

const AppRouter = () => {
    return(
    <Router history={history}>
        <div>
            <Nav />
              <Switch>
                <Route exact path='/' component={Index} />
                <Route path='/signin' component={SignIn}/>
                <Route path='/register' component={Register}/>
                <PrivateRoute path='/home' component={Home}/>
              </Switch>
        </div>
    </Router>
    );
}

export default AppRouter;

提供者中的Index.js包装存储

import React from 'react';
import ReactDOM from 'react-dom';
import { connect } from 'react-redux';
import { Provider } from 'react-redux';
import 'tachyons';
import './index.css';
import App from './App';
import configureStore from './store/configStore';
import * as serviceWorker from './serviceWorker';



const store = configureStore();



const jsx = (
    <Provider store={store}>
        <App />
    </Provider>
    )
ReactDOM.render(jsx, document.getElementById('root'));


serviceWorker.unregister();

Auth Reducer

    const INIIAL_STATE = {isLoginSuccess: true, uname: '' }


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

动作创建者

import configureStore from '../store/configStore';
import { history } from '../routers/AppRouter';

const store = configureStore();

export const setLoginSuccess = (isLoginSuccess) => {
    return {
        type: 'LOGIN_SUCCESS',
        isLoginSuccess
    };
}
export const login = (uname) => {
    return{
    type: 'LOGIN',
    uname
    };
}


export const logout = () => {
    return{
    type: 'LOGOUT'
    };
}




export const startLogin = (username, password) => {
    return() => {
        fetch('http://localhost:3000/signin' , {
      method: 'post',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({
            username: username,
            password: password
          })
        }).then(response => response.json())
          .then(
            user => {
            if(user) {
                store.dispatch(login(user.username));
                store.dispatch(setLoginSuccess(true));
                if(history.location.pathname === '/signin')
                {
                    history.push('/home');
                }
            }
        })
        .catch(err => {console.log(err)});
    }
}

在使用mapStateToProps时道具中未定义

0 个答案: