时间戳

首页 > 解决方案 > React 应用程序不显示从 MongoDB Atlas 获取的数据

reactjs - React 应用程序不显示从 MongoDB Atlas 获取的数据

问题描述

我正在创建一个从 MongoDb Atlas 获取数据的简单 Web 应用程序（MERN 堆栈）。我有两个组件，一个称为列表（列表项数组），另一个称为列表项：

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}。

有没有人遇到过同样的问题？

标签： reactjsaxiosmernreact-contextmongodb-atlas

解决方案

我认为您对道具进行了错误的解构。

<ListingItem key={listing._id} listing={listing} />

const ListingItem = ({listing}) => {

将你的道具包裹在一个{}

推荐阅读