javascript - 无法设置未定义的属性“道具”

Question

我的代码有问题

TypeError：无法设置未定义的属性“道具”

我认为我做的一切都是正确的。我什至参考了

react 无法设置 undefined 的 props 的属性

和

React-router：TypeError：无法设置未定义的属性'props'

无法找出错误。

import React from 'react';
import {BrowserRouter as Router, Route, Link} from "react-router-dom";
import signUp from './signUp';
import signIn from './signIn';
import Users from './Users';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
import Button from '@material-ui/core/Button';
import {withStyles} from '@material-ui/core';
import Dashboard from './dashBoard';
import { connect } from 'react-redux';
import { createBrowserHistory } from 'history';
import PropTypes, { func, bool, string} from 'prop-types';

export const history = createBrowserHistory({forceRefresh: true});

const styles = {
    // This group of buttons will be aligned to the right

    rightToolbar: {
        color: '#fff',
        textDecoration: 'none',
        a: {
            color: '#fff'

        }
    },
    rightt: {
        marginLeft: 'auto',
        marginRight: 24
    },
    root: {
        flexGrow: 1
    },
    menuButton: {
        marginRight: 16,
        marginLeft: -12
    }
};



const logout = (e) => {
    e.preventDefault();
    localStorage.removeItem('JWT');

};


const Navbar = ({classes, props}) => (


    <Router history={history}>
        <div className={classes.root}>

            <AppBar position="static" className={classes.navbar}>
                <Toolbar>
                    <IconButton color="inherit" aria-label="Menu">
                        <MenuIcon/>
                    </IconButton>
                    <Typography variant="h6" color="inherit">
                        Eli App
                    </Typography>
                    <Typography classcolor="inherit" className={classes.rightt}>

                    {!props.token && ( 

                            <Button>
                            <Link to="/signUp" className={classes.rightToolbar} >
                                Sign Up
                            </Link>
                            </Button>



                    )}



                        <Button>
                            <Link to="/users" className={classes.rightToolbar}>
                              Users
                            </Link>
                        </Button>
                        <Button>
                            <Link to="/dashboard" className={classes.rightToolbar}>
                              Dashboard
                            </Link>
                        </Button>
                        <Button
                            onClick={logout}
                         >
                            <Link className={classes.rightToolbar} to={'/'}>
                                LogOut
                            </Link>
                        </Button>


                    </Typography>

                </Toolbar>
            </AppBar>

            <Route path="/signUp" component={signUp}/>
            <Route path="/signIn" component={signIn}/>
            <Route path="/users" component={Users}/>
            <Route path="/dashboard" component={Dashboard}/>
            <Route path="/signOut"/>
        </div>
    </Router>

);


const mapStateToProps = (state) => ({
    token: state.user.getToken
})

const mapDispatchToProps = (dispatch) => ({
    //   logIn: (user) => dispatch(logIn(user))

});

Navbar.propTypes = {
    token:PropTypes.string,

}

// export default withStyles(styles)(Navbar);
export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles))(Navbar);

更新

标签： javascriptreactjs

Answer 1

您在函数参数中解构的值已经是您的道具，如果您想访问您的token，您可以执行以下操作：

const Navbar = ({classes, token}) => ( //classes and token are INSIDE your props

在渲染函数中：

{!token && ( 

似乎问题也可能来自您的export：

export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles))(Navbar);

您应该compose一起使用多个 HOC：

import { compose } from 'redux'

//....

export default compose(connect(mapStateToProps, mapDispatchToProps), withStyles(styles))(Navbar);

在 redux 中使用无状态函数时，您可能还会遇到一些意外行为，我建议您也使用 @Shalini Sentiya 的解决方案。