React 应用程序不显示从 MongoDB Atlas 获取的数据
React Application does not display data fetched from MongoDB Atlas
我正在创建一个从 MongoDb Atlas 获取数据的简单 Web 应用程序(MERN 堆栈)。我有两个组件,一个叫做 Listings(一组列表项),另一个叫做 ListingItem:
Listings.js 组件:
import React, { Fragment, useContext, useEffect } from "react";
import ListingItem from "./ListingItem";
import ListingContext from "../../context/listing/listingContext";
const Listings = () => {
const listingContext = useContext(ListingContext);
const { listings, getListings, loading } = listingContext;
useEffect(() => {
getListings();
// eslint-disable-next-line
}, []);
return (
<Fragment>
{listings.map((listing) => (
<ListingItem key={listing._id} listing={listing} />
))}
</Fragment>
);
};
export default Listings;
ListingItem.js 组件:
import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import PropTypes from "prop-types";
import Card from "@material-ui/core/Card";
import CardHeader from "@material-ui/core/CardHeader";
import CardMedia from "@material-ui/core/CardMedia";
import CardContent from "@material-ui/core/CardContent";
import CardActions from "@material-ui/core/CardActions";
import Avatar from "@material-ui/core/Avatar";
import Typography from "@material-ui/core/Typography";
import IconButton from "@material-ui/core/IconButton";
import FavoriteIcon from "@material-ui/icons/Favorite";
import ShareIcon from "@material-ui/icons/Share";
import listingImage from "../../resources/listing.jpg";
const useStyles = makeStyles(() => ({
root: {
maxWidth: 345,
},
media: {
height: 0,
paddingTop: "56.25%", // 16:9
},
avatar: {
backgroundColor: "coral",
},
}));
const ListingItem = (listing) => {
const classes = useStyles();
const { neighbourhood, bedrooms, price, priceCurr, area, areaUoM } = listing;
return (
<div className="container">
<div className="listing-item">
<Card className={classes.root}>
<CardHeader
avatar={<Avatar className={classes.avatar} />}
title="Title"
subheader="Subtitle"
/>
<CardMedia className={classes.media} image={listingImage} title="" />
<CardContent>
<Typography component="p">
{price} {priceCurr}
</Typography>
<Typography component="p">A {bedrooms} bedroom,</Typography>
<Typography component="p">
{area} {areaUoM} apartment
</Typography>
<Typography component="p">Located in {neighbourhood}</Typography>
</CardContent>
<CardActions disableSpacing>
<IconButton aria-label="add to favorites">
<FavoriteIcon />
</IconButton>
<IconButton aria-label="share">
<ShareIcon />
</IconButton>
</CardActions>
</Card>
</div>
</div>
);
};
ListingItem.propTypes = {
listing: PropTypes.object.isRequired,
};
export default ListingItem;
该应用程序显然连接到 Mongodb Atlas,因为当我 运行 该应用程序时,它恰好将两个列表项呈现到屏幕上(我在数据库中有两个文档)。但它不显示我在 ListingItem 组件中的变量 {price}、{priceCurr}、{bedrooms} 和 {neighbourhood}。
有没有人遇到过同样的问题?
我认为你对 props 进行了错误的解构。
<ListingItem key={listing._id} listing={listing} />
const ListingItem = ({listing}) => {
将道具包裹在 {}
中
试试这个以显示 listings 中存在的数据。
首先在将 listings 返回到 ListingItem 之前对其进行控制台,如果它不包含任何数据,则可能存在不同的对象结构或者可能为空.
当它真的包含数据之后再试试这个:
const Listings = () => {
const listingContext = useContext(ListingContext);
const { listings, getListings, loading } = listingContext;
useEffect(() => {
getListings();
// eslint-disable-next-line
}, []);
return (
<Fragment> //Try passing whole object of **listings**
<ListingItem key={listing._id} listing={listings} />
</Fragment>
);
};
export default Listings;
然后在 ListingItem 组件中试试这个:
const ListingItem = (props) => {
const classes = useStyles();
return (
props && props.listing.map(item=>{ //Apply map after checking props
<div className="container">
<div className="listing-item">
<Card className={classes.root}>
<CardHeader
avatar={<Avatar className={classes.avatar} />}
title="Title"
subheader="Subtitle"
/>
<CardMedia className={classes.media} image={listingImage} title="" />
<CardContent>
<Typography component="p">
{item.price} {item.priceCurr}
</Typography>
<Typography component="p">A {item.bedrooms} bedroom,</Typography>
<Typography component="p">
{item.area} {item.areaUoM} apartment
</Typography>
<Typography component="p">Located in {item.neighbourhood}</Typography>
</CardContent>
<CardActions disableSpacing>
<IconButton aria-label="add to favorites">
<FavoriteIcon />
</IconButton>
<IconButton aria-label="share">
<ShareIcon />
</IconButton>
</CardActions>
</Card>
</div>
</div>
})
);
};
第二种方式是props解构后访问
因此,在您的 ListingItem 组件 中访问 listing 如下:
const {neighbourhood, bedrooms, price, priceCurr, area, areaUoM }= listing.listing;
并且它将正确访问它。
我正在创建一个从 MongoDb Atlas 获取数据的简单 Web 应用程序(MERN 堆栈)。我有两个组件,一个叫做 Listings(一组列表项),另一个叫做 ListingItem:
Listings.js 组件:
import React, { Fragment, useContext, useEffect } from "react";
import ListingItem from "./ListingItem";
import ListingContext from "../../context/listing/listingContext";
const Listings = () => {
const listingContext = useContext(ListingContext);
const { listings, getListings, loading } = listingContext;
useEffect(() => {
getListings();
// eslint-disable-next-line
}, []);
return (
<Fragment>
{listings.map((listing) => (
<ListingItem key={listing._id} listing={listing} />
))}
</Fragment>
);
};
export default Listings;
ListingItem.js 组件:
import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import PropTypes from "prop-types";
import Card from "@material-ui/core/Card";
import CardHeader from "@material-ui/core/CardHeader";
import CardMedia from "@material-ui/core/CardMedia";
import CardContent from "@material-ui/core/CardContent";
import CardActions from "@material-ui/core/CardActions";
import Avatar from "@material-ui/core/Avatar";
import Typography from "@material-ui/core/Typography";
import IconButton from "@material-ui/core/IconButton";
import FavoriteIcon from "@material-ui/icons/Favorite";
import ShareIcon from "@material-ui/icons/Share";
import listingImage from "../../resources/listing.jpg";
const useStyles = makeStyles(() => ({
root: {
maxWidth: 345,
},
media: {
height: 0,
paddingTop: "56.25%", // 16:9
},
avatar: {
backgroundColor: "coral",
},
}));
const ListingItem = (listing) => {
const classes = useStyles();
const { neighbourhood, bedrooms, price, priceCurr, area, areaUoM } = listing;
return (
<div className="container">
<div className="listing-item">
<Card className={classes.root}>
<CardHeader
avatar={<Avatar className={classes.avatar} />}
title="Title"
subheader="Subtitle"
/>
<CardMedia className={classes.media} image={listingImage} title="" />
<CardContent>
<Typography component="p">
{price} {priceCurr}
</Typography>
<Typography component="p">A {bedrooms} bedroom,</Typography>
<Typography component="p">
{area} {areaUoM} apartment
</Typography>
<Typography component="p">Located in {neighbourhood}</Typography>
</CardContent>
<CardActions disableSpacing>
<IconButton aria-label="add to favorites">
<FavoriteIcon />
</IconButton>
<IconButton aria-label="share">
<ShareIcon />
</IconButton>
</CardActions>
</Card>
</div>
</div>
);
};
ListingItem.propTypes = {
listing: PropTypes.object.isRequired,
};
export default ListingItem;
该应用程序显然连接到 Mongodb Atlas,因为当我 运行 该应用程序时,它恰好将两个列表项呈现到屏幕上(我在数据库中有两个文档)。但它不显示我在 ListingItem 组件中的变量 {price}、{priceCurr}、{bedrooms} 和 {neighbourhood}。
有没有人遇到过同样的问题?
我认为你对 props 进行了错误的解构。
<ListingItem key={listing._id} listing={listing} />
const ListingItem = ({listing}) => {
将道具包裹在 {}
试试这个以显示 listings 中存在的数据。 首先在将 listings 返回到 ListingItem 之前对其进行控制台,如果它不包含任何数据,则可能存在不同的对象结构或者可能为空.
当它真的包含数据之后再试试这个:
const Listings = () => {
const listingContext = useContext(ListingContext);
const { listings, getListings, loading } = listingContext;
useEffect(() => {
getListings();
// eslint-disable-next-line
}, []);
return (
<Fragment> //Try passing whole object of **listings**
<ListingItem key={listing._id} listing={listings} />
</Fragment>
);
};
export default Listings;
然后在 ListingItem 组件中试试这个:
const ListingItem = (props) => {
const classes = useStyles();
return (
props && props.listing.map(item=>{ //Apply map after checking props
<div className="container">
<div className="listing-item">
<Card className={classes.root}>
<CardHeader
avatar={<Avatar className={classes.avatar} />}
title="Title"
subheader="Subtitle"
/>
<CardMedia className={classes.media} image={listingImage} title="" />
<CardContent>
<Typography component="p">
{item.price} {item.priceCurr}
</Typography>
<Typography component="p">A {item.bedrooms} bedroom,</Typography>
<Typography component="p">
{item.area} {item.areaUoM} apartment
</Typography>
<Typography component="p">Located in {item.neighbourhood}</Typography>
</CardContent>
<CardActions disableSpacing>
<IconButton aria-label="add to favorites">
<FavoriteIcon />
</IconButton>
<IconButton aria-label="share">
<ShareIcon />
</IconButton>
</CardActions>
</Card>
</div>
</div>
})
);
};
第二种方式是props解构后访问
因此,在您的 ListingItem 组件 中访问 listing 如下:
const {neighbourhood, bedrooms, price, priceCurr, area, areaUoM }= listing.listing;
并且它将正确访问它。