reactjs - 动态数据未在浏览器上呈现

问题描述

美好的一天，我正在尝试使用 react-redux 创建一个 MEARN 堆栈应用程序。我已经能够将数据发布到我的 MongoDB 地图集，并且我还能够获取数据并 console.log 它。但是当我尝试将数据呈现到我的前端时，浏览器会返回一个空页面。我想知道是什么导致了这个问题。这是我第一次创建 React 应用程序。

import './Experience.css';

import Post from './Posts/Post';

import { Grid, CircularProgress  } from '@material-ui/core';
import { useSelector } from 'react-redux';

function Experience() {
  const posts = useSelector((state) => state.posts);
  console.log(posts); //Logged my data on DevTool -> Console (see image below)
  return (
    !posts.length ? <CircularProgress /> : (
      <Grid container alignItems="stretch" spacing={3}>
        Test //view browser
        {posts.map((post) => (
          <Grid key={post._id} item xs={3} >
            <Post post={post} />
          </Grid>
        ))}
      </Grid>
    )
  );
}

export default Experience;

import React from 'react';

 import { Card, CardActions, CardContent, CardMedia, IconButton, Typography, CardHeader, Avatar } from '@material-ui/core';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
 
 const Post = ({ post }) => {
    return (
        <Card>
            <CardMedia image={post.companyLogo} />
            <CardHeader
                avatar={
                <Avatar aria-label="recipe">
                    <img href={post.employerImage}/>
                </Avatar>
                }
                action={
                <IconButton aria-label="settings">
                    <MoreVertIcon />
                </IconButton>
                }
                title={post.employerName}
                subheader={post.jobTitle}
            />
            <CardContent>
            <Typography variant="body2" color="textSecondary" component="p">{post.responsibility.map((tag) => `️${tag} `)}</Typography>
            </CardContent>
            <CardActions>
                <Typography variant="body2" color="textSecondary" component="p">{post.employedDate}</Typography>
            </CardActions>
        </Card>
    );
}

export default Post;

标签： reactjsreact-redux

由于您从数据库获得响应，因此必须存在渲染错误。快速浏览一下，我发现您误用了该Avatar组件。

它应该是这样的：<Avatar alt="recipe" src={post.employerImage} />

或者如果你想使用children道具，img 标签src不需要href：

<Avatar aria-label="recipe">
    <img src={post.employerImage}/>
</Avatar>

reactjs - 动态数据未在浏览器上呈现

问题描述

解决方案

推荐阅读