我正在尝试使用redux和材质ui显示电影列表。
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有问题,因为当我在一个简单的组件中尝试此代码(没有材料ui时,我不会收到错误。)>
有人可以帮我吗?谢谢
我正在尝试使用redux和材质ui显示电影列表。 FilmsService:导出const FilmServices = {getAllFilms,};函数getAllFilms(){返回axios.get(config.baseUrl).then((...
@ Muhammad Awais我有这样的changer我的render(),它的工作::>
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>
);
}
在render()方法中,删除此行const { films } = this.props.films;
,然后尝试以下操作:const films = this.props.films || [];
并且,请在构造函数中删除console.log(this.props.films)
。使用以下方法更新FilmAction:
也通过更改这部分代码为我工作:
在您的渲染功能中执行类似const {films} = this.props;
的操作>