![](/img/trans.png)
[英]I am getting read property map of undefined.I have tried everything but nothing worked
[英]React keeps saying .map is not a function and nothing I have tried is working?
我有一个组件,它使用 axios 从 API 获取列表。 当主页第一次加载时,所有列表都被检索并加载正常,但是当我 go 说列表详细信息页面并返回主页时,当我刷新页面时,我得到一个“listings.map 不是函数”错误我没有收到错误并且列表加载。
这是组件(尝试使用加载 boolean 但什么也没做):
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { getListings } from '../../actions/listings';
import { Link as RouteLink } from 'react-router-dom';
import PropTypes from 'prop-types';
//material ui
import {
Container,
Typography,
Button,
Card,
CardActions,
CardActionArea,
CardContent,
CardMedia,
Grid,
Link,
} from '@material-ui/core';
import { withStyles } from '@material-ui/core/styles';
const useStyles = {
listings: {
marginTop: '100px',
backgroundColor: 'white',
},
title: {
marginBottom: '15px',
},
listImg: {
width: '250px',
height: '250px',
},
card: {
width: '275px',
height: '300px',
},
media: {
height: 140,
},
};
class Listings extends Component {
static propTypes = {
listings: PropTypes.array.isRequired,
isLoading: PropTypes.bool,
};
componentDidMount() {
this.props.getListings();
}
render() {
const { classes, listings } = this.props;
return (
<>
<Container maxWidth='lg' className={classes.listings}>
<Typography align='center' variant='h1' className={classes.title}>
Recent Listings
</Typography>
<Grid container justify='center' spacing={8}>
{listings &&
listings.map((listing, index) => (
<Grid key={index} item>
<Link component={RouteLink} to={`/listing/${listing._id}`}>
<Card className={classes.card}>
<CardActionArea>
<CardMedia
className={classes.media}
title='Contemplative Reptile'
image={listing.imgUrls[0]}
/>
<CardContent>
<Typography gutterBottom variant='h6' component='h2'>
{listing.title}
</Typography>
<Typography
variant='body2'
color='textSecondary'
component='p'
>
{listing.price} /night
</Typography>
</CardContent>
</CardActionArea>
<CardActions>
<Button size='small' color='primary'>
BOOK
</Button>
</CardActions>
</Card>
</Link>
</Grid>
))}
</Grid>
</Container>
</>
);
}
}
//sets component props to the app state
const mapStateToProps = (state) => ({
listings: state.listings.listings,
isLoading: state.listings.isLoading,
});
//withStyles is used for material-ui styles (using class components)
export default connect(mapStateToProps, { getListings })(
withStyles(useStyles)(Listings)
);
这是 getListings 操作:
export const getListings = () => (dispatch) => {
axiosInstance
.get('/listings')
.then((res) => {
dispatch({
type: GET_LISTINGS,
payload: res.data,
});
})
.catch((err) => console.log(err));
};
和减速机:
const initialState = {
listings: [],
isLoading: true,
};
export default function (state = initialState, action) {
switch (action.type) {
case GET_LISTINGS:
return {
...state,
listings: action.payload,
isLoading: false,
};
case GET_LISTING:
return {
...state,
listings: action.payload,
isLoading: false,
};
case CREATE_LISTING:
return {
...state,
listings: [...state.listings, action.payload],
};
case CLEAR_LISTINGS:
return {
...state,
listings: [],
};
default:
return state;
}
}
只是不知道它是如何工作的,但有时不会。 列表在 initialState 中也被声明为一个数组。
如果您的列表变量类型是
Object
那么你必须像这样 map :
const object1 = {
a: 'somestring',
b: 42
};
for (const [key, value] of Object.entries(object1)) {
console.log(`${key}: ${value}`);
}
// expected output:
// "a: somestring"
// "b: 42"
// order is not guaranteed
另一方面,如果您的变量是
大批
然后:
const numbers = [2, 4, 6, 8];
const squares = numbers.map(number => number * numbers);
console.log(squares);
// output: Array [4, 16, 36, 64]
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.