Не удается отобразить компоненту React

285

27 февраля 2018, 07:31

Добрый день всем! Начал изучать React, для первой своей работы выбрал Material UI v1.0. Там оказалась подходящая мне компонента Media Cards https://material-ui-next.com/demos/cards/ Требовалось создать столько карточек, сколько у меня автомобилей. Добавил компоненту и начал получать ошибки на connect, то на на withStyles. Последние ошибки: После долгих мучений имею следующий код:

import React, {Component} from 'react'; 
import { withStyles } from 'material-ui/styles'; 
import Card, { CardActions, CardContent, CardMedia } from 'material-ui/Card'; 
import Button from 'material-ui/Button'; 
import Typography from 'material-ui/Typography'; 
import {connect} from 'react-redux'; 
import compose from 'recompose/compose'; 
import {fetchAuto} from 'actions'; 
import {getAutos} from 'selectors'; 
 
const styles = { 
    card: { 
        maxWidth: 345, 
    }, 
    media: { 
        height: 200, 
    }, 
}; 
 
class listAuto extends Component { 
    componentDidMount () { 
        this.props.fetchAuto(); 
    } 
 
    renderCardAuto (auto, index, props) { 
        const {classes} = props; 
        return ( 
            <div> 
                <Card className={classes.card} key={index}> 
                    <CardMedia 
                        className={classes.media} 
                        image={auto.image} 
                        title="Contemplative Reptile" 
                    /> 
                    <CardContent> 
                        <Typography variant="headline" component="h2"> 
                            {auto.name} 
                        </Typography> 
                        <Typography component="p"> 
                            {auto.description} 
                        </Typography> 
                    </CardContent> 
                    <CardActions> 
                        <Button size="small" color="primary"> 
                            Share 
                        </Button> 
                        <Button size="small" color="primary"> 
                            Learn More 
                        </Button> 
                    </CardActions> 
                </Card> 
            </div> 
        ) 
    } 
 
    render () { 
        const {autos} = this.props; 
        return( 
            <div> 
                {autos.map((auto, index) => this.renderCardAuto(auto, index, this.props))} 
            </div> 
        ) 
    }; 
 
} 
 
const mapStateToProps = state => ({ 
    autos: getAutos(state) 
}); 
const mapDispatchToProps = { 
fetchAuto 
}; 
 
 
//export default connect (mapStateToProps, mapDispatchToProps)(listAuto) 
export default compose( 
withStyles(styles, { 
    name: 'listAuto', 
}), 
connect(mapStateToProps, mapDispatchToProps), 
)(listAuto);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>