Блог

Я создаю простое веб-приложение (MERN stack), которое извлекает данные из MongoDB Atlas. У меня есть два компонента, один из которых называется 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, потому что, когда я запускаю приложение, оно выводит на экран ровно два элемента списка (у меня есть два документа в базе данных). Но оно не отображает переменные {price}, {priceCurr}, {спальни} и {окрестности}, которые у меня есть в компоненте ListingItem.

Есть ли кто-нибудь, кто сталкивался с такой же проблемой?

Попробуйте это для отображения данных, присутствующих в списках. Прежде всего, консоль, прежде чем возвращать списки в 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 amp;amp; 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>
     }) 
    );
    };
  

 const {neighbourhood, bedrooms, price, priceCurr, area, areaUoM }= listing.listing;