Показать список данных в компонентном материале ReactJS - PullRequest
Новая
       55

Показать список данных в компонентном материале ReactJS

1 голос
/ 10 ноября 2019

Я пытаюсь показать список фильмов с использованием редуксов и материалов.

FilmsService: 

export const FilmServices = {
    getAllFilms,

};


function getAllFilms(){
    return axios.get(config.baseUrl).then((response)=>{
        return response;
    }).catch((err)=>{
        console.log(err);
    })
}

FilmAction: 

export function getAllFilms() {
    return dispatch => {
        FilmServices.getAllFilms()
            .then((response) => {
                if (response) {
                    dispatch(GET_FILMS(response));
                }
            })
    }
}

FilmReducer: 

   const initialState = { films: [] }
export function filmreducer(state = initialState, action) {
    switch (action.type) {
        case 'GET_FILMS':
            console.log(action);
            return{
                ...state,
                films : action.payload.data

            };
        case 'GET_FILMS_BY_NAME':
            return{
                ...state,
                films : action.payload.data

            };
        default:
            return state
    }
}

А это мой компонент: 

import React , { Component }from 'react';
import PropTypes from 'prop-types';
import {makeStyles, withStyles} from '@material-ui/core/styles';
import {getAllFilms} from "../store/actions/FilmActions";
import Button from '@material-ui/core/Button';
import Card from "@material-ui/core/Card/Card";
import CardActionArea from "@material-ui/core/CardActionArea/CardActionArea";
import CardMedia from "@material-ui/core/CardMedia/CardMedia";
import CardContent from "@material-ui/core/CardContent/CardContent";
import Typography from "@material-ui/core/Typography/Typography";
import CardActions from "@material-ui/core/CardActions/CardActions";
import connect from "react-redux/es/connect/connect";
import { withRouter } from 'react-router-dom';

const useStyles = makeStyles({
    card: {
        maxWidth: 345,
    },
});

class FilmsCard extends Component {


    componentDidMount () {
        const {dispatch} = this.props;
        dispatch(getAllFilms());
    }

    constructor(props) {
        super(props);
        this.state = {
            change: ''
        };
    }

    render() {
        const films = this.props.films || [];
        return (
            <Card>
                {films.map(film => {
                    return(
                    <CardActionArea>
                        <CardMedia
                            component="img"
                            alt="Contemplative Reptile"
                            height="140"
                            image="/static/images/cards/contemplative-reptile.jpg"
                            title="Contemplative Reptile"
                        />
                        <CardContent>
                            <Typography gutterBottom variant="h5" component="h2">
                                {film.show ? film.show.name : film.name}
                            </Typography>
                            <Typography variant="body2" color="textSecondary" component="p">
                                {film.show ? film.show.name : film.name}
                            </Typography>
                        </CardContent>
                    </CardActionArea>
                        )})}
                <CardActions>
                    <Button size="small" color="primary">
                        Share
                    </Button>
                    <Button size="small" color="primary">
                        Learn More
                    </Button>
                </CardActions>
            </Card>
        );
    }
}

FilmsCard.propTypes = {
    classes: PropTypes.object.isRequired,
};

const mapStateToProps = (state) => {
    return {
        films : state.filmreducer
    };
}
const connectedVendorPage = withRouter(connect(mapStateToProps, null, null, {
    pure: false
})(withStyles(useStyles)(FilmsCard)));
export { connectedVendorPage as FilmsCard };

когда я запускаю, я получаю эту ошибку:

TypeError: Невозможно прочитать свойство 'length' из неопределенного

У меня проблема с материалом, который, я думаю, потому что, когдая пытаюсь этот код в простой компонент (без материала UI) я не получаю ошибки.

Может кто-нибудь помочь мне, пожалуйста? Спасибо

Ответы [ 3 ]

1 голос
/ 10 ноября 2019

@ Мухаммад Awais Я изменил мой рендер () вот так, и это сработало: 

render() {
    const { classes } = this.props;
    const { films } = this.props.films;

    return (
        <Card className={classes.card}>
            {films.map(film => {
                return(
                    <CardActionArea>
                        <CardMedia
                            className={classes.media}
                            component="img"
                            alt="Contemplative Reptile"
                            height="140"
                            image="http://static.tvmaze.com/uploads/images/medium_portrait/168/421041.jpg"
                            title="Contemplative Reptile"
                        />
                        <CardContent>
                            <Typography gutterBottom variant="h5" component="h2">
                                {film.show ? film.show.name : film.name}
                            </Typography>
                            <Typography variant="body2" color="textSecondary" component="p">
                                {film.show ? film.show.name : film.name}
                            </Typography>
                        </CardContent>
                    </CardActionArea>
                )})}
            <CardActions>
                <Button size="small" color="primary">
                    Share
                </Button>
                <Button size="small" color="primary">
                    Learn More
                </Button>
            </CardActions>
        </Card>
    );
}

}

0 голосов
/ 10 ноября 2019

Также изменение этой части кода работало для меня: 

 const useStyles = makeStyles({
        card: {
            maxWidth: 345,
        },
    });

изменилось на это: 

 const styles = theme => ({
        card: {
            maxWidth: 345,
        },
        media: {
            height: 50,
        },
    });
0 голосов
/ 10 ноября 2019

В методе render () удалите эту строку const { films } = this.props.films; и попробуйте это: const films = this.props.films || [];, а также удалите console.log(this.props.films) в конструкторе. Обновите фильм Action с этим: 

export function getAllFilms() {
    return dispatch => {
        return FilmServices.getAllFilms()
            .then((response) => {
                if (response) {
                    dispatch(GET_FILMS(response));
                }
            })
    }
}
...