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

【问题标题】：React Application does not display data fetched from MongoDB AtlasReact 应用程序不显示从 MongoDB Atlas 获取的数据
【发布时间】：2021-01-25 08:51:51
【问题描述】：

我正在创建一个从 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}。

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

【问题讨论】：

在ListingItem 中你能console.log 例如priceCurr吗？
是的，我做到了。它为所有四个变量返回 undefined。

标签： reactjs axios mern react-context mongodb-atlas

【解决方案1】：

尝试这样显示列表中的数据。首先在将 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;

它会正确访问它。

【讨论】：

【解决方案2】：

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

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

const ListingItem = ({listing}) => {

将你的道具包裹在{}

【讨论】：