Question

我是一个有反应的初学者。我收到这样的错误：

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

如果我删除此代码，道具将起作用：

export default compose(
    withStyles(styles,{name:'MainLayout'}),
    connect(mapStateToProps,{logoutAdmin})
    (MainLayout));

将此代码替换为此：

export default withStyles(styles)(MainLayout);

是因为没有发送道具吗？或代码中发生错误？

对不起，我不知道该怎么做，我已经按照教程进行了学习，并且已经检查了几个小时，结果仍然无法正常工作

这是我的代码：

import React from 'react';
import compose from 'recompose/compose';
import { withStyles } from '@material-ui/core/styles';
import { AppBar, IconButton,Button, Toolbar, Typography, Drawer, List,Paper } from '@material-ui/core';
import InboxIcon from '@material-ui/icons/Inbox';
import classNames from 'classnames';
import MenuIcon from '@material-ui/icons/Menu';
import FaceIcon from '@material-ui/icons/Face';
import PowerSettingsNewIcon from '@material-ui/icons/PowerSettingsNew';
import { Link } from 'react-router-dom';
import { mainListItems } from './ListItem.js';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { logoutAdmin } from '../../actions/authActions';


const drawerWidth = 260;
const styles = theme => ({
    root: {
        display: 'flex',
    },
    drawer: {
        width: drawerWidth,
        flexShrink: 0,
    },
    drawerPaper: {
        whiteSpace: 'nowrap',
        width: drawerWidth,
        flexShrink: 0,
        transition: theme.transitions.create('width', {
            easing: theme.transitions.easing.sharp,
            duration: theme.transitions.duration.enteringScreen,
        }),
    },

    appBar: {
        zIndex: theme.zIndex.drawer + 1, //agar z index MainLayout lebih tinggi dari navbar
        transition: theme.transitions.create(['width', 'margin'], {
            easing: theme.transitions.easing.sharp,
            duration: theme.transitions.duration.leavingScreen,
        }),
    },
    appBarShift: {
        marginLeft: drawerWidth,
        width: `calc(100% - ${drawerWidth}px)`,
        transition: theme.transitions.create(['width', 'margin'], {
            easing: theme.transitions.easing.sharp,
            duration: theme.transitions.duration.enteringScreen,
        }),
    },
    toolbar:theme.mixins.toolbar,

    drawerPaperClose: {
        overflowX: 'hidden',
        transition: theme.transitions.create('width', {
            easing: theme.transitions.easing.sharp,
            duration: theme.transitions.duration.leavingScreen,
        }),
        width: theme.spacing.unit * 7,
        [theme.breakpoints.up('sm')]: {
            width: theme.spacing.unit * 9,
        },
    },
    content: {
        flexGrow: 1,
        padding: theme.spacing.unit * 5,
        transition: theme.transitions.create('margin', {
            easing: theme.transitions.easing.sharp,
            duration: theme.transitions.duration.leavingScreen,
        }),
        marginLeft: -drawerWidth+40,
    },
    contentShift: {
        transition: theme.transitions.create('margin', {
            easing: theme.transitions.easing.easeOut,
            duration: theme.transitions.duration.enteringScreen,
        }),
        marginLeft: 0,
    },
    grow: {
        flexGrow: 1,
    },

});

class MainLayout extends React.Component {
    constructor() {
        super();
        this.state = {
            open: true,
            Menu: [
                { title: "Dashboard", icon: "DashboardIcon", link: "/" },
                { title: "Inbox", icon: "MenuIcon", link: "/inbox" },
            ],
        };
    }
    handleDrawerOpen = () => {
        this.setState({ open: !this.state.open });
    };
    onLogoutClick = () => {
        this.props.logoutAdmin();
    }


    render() {

        const { classes } = this.props;
        const { open } = this.state;

        return (
            <div className={classes.root}>
                <AppBar position="fixed" className={classes.appBar}  >
                    <Toolbar disableGutters={!this.state.open} className={classes.toolbar} >

                        <IconButton className={classes.menuButton} onClick={this.handleDrawerOpen} className={classNames(
                            classes.menuButton,
                            this.state.open && classes.menuButtonHidden,
                        )} color="inherit" aria-label="Open drawer">
                            <MenuIcon />
                        </IconButton>
                        <Typography variant="h6" color="inherit" noWrap>
                            Bimbingan Konseling
                    </Typography>

                        <div className={classes.grow} />
                        <Button
                            color="inherit"
                            component={Link} to='/login'

                            style={{textTransform:"none"}}
                        >
                            <FaceIcon />
                            <Typography variant="subtitle1"  color="inherit"  style={{marginLeft:10}}>
                                Username
                        </Typography>
                        </Button>
                        <Button
                            color="inherit"
                            component={Link} to='/login'

                            style={{ textTransform: "none" }}

                        >

                        <PowerSettingsNewIcon />
                            <Typography variant="subtitle1" color="inherit" onClick={this.onLogoutClick} style={{marginLeft:10}}>
                                Logout
                        </Typography>
                        </Button>



                    </Toolbar>
                </AppBar>
                <Drawer
                    className={classes.drawerPaper}
                    variant="permanent"
                    classes={{
                        paper: classNames(classes.drawerPaper, !this.state.open && classes.drawerPaperClose)
                    }}
                >
                    <div className={classes.toolbar} />
                    <List >
                        {mainListItems}
                    </List>
                    <div />
                </Drawer>
                <main className={classNames(classes.content, {
                    [classes.contentShift]: open,
                })}>
                <div style={{marginTop:40}}>
                   {this.props.children}
                </div>

                </main>

            </div>
        );
    }
}

MainLayout.propTypes = {
    classes: PropTypes.object.isRequired,
    logoutAdmin:PropTypes.func.isRequired,
    auth:PropTypes.object.isRequired

};

const mapStateToProps = (state) => ({
    auth: state.auth
});


// Menggunakan library recompose
export default compose(
    withStyles(styles,{name:'MainLayout'}),
    connect(mapStateToProps,{logoutAdmin})
    (MainLayout));

Answer 1

U可以尝试使用compose中的redux并像这样使用。

import { connect } from "react-redux";
import { compose } from "redux";
import { withStyles } from "@material-ui/core/styles";

// Your code

export default compose(
  connect(mapStateToProps),
)(withStyles(styles)(MainLayout));

Answer 2

您没有正确使用compose语法。您应该通过compose将组件作为参数传递给返回的函数

export default compose(
    withStyles(styles,{name:'MainLayout'}),
    connect(mapStateToProps,{logoutAdmin})
)(MainLayout);

Redux-'props'未使用compose定义

2 个答案: