错误：CommentsSection（...）：渲染没有返回任何内容

Question

I am trying to make a simple page with multiple Material UI card components & redux which mimics a basic social media page. The page loads fine, but whenever I try to expand the card, it throws the error that nothing was returned. I tried to console.log the output, that worked fine. What could be the error? And the possible fix?

I am understanding that the part is causing the error. I have reproduced both the codes here. I am also providing the state in the redux-store from which everything is downloaded into the various files.

Redux Store

const initState = {
    posts: [
        {
            id: '0', title: 'Warum mit nun der des', content: 'Et somptueux et les apres-demain décor moqueur mon corps trait femme. Sincere «la la contemplons ce, fait dont doué grimace.',
            comments: [{ id: '0', author: 'aa', time: 'aa', text: 'abc' }, { id: '1', author: 'aa', time: 'aa', comment: 'abc' }]
        },
        {
            id: '1', title: 'Warum mit nun der des', content: 'Et somptueux et les apres-demain décor moqueur mon corps trait femme. Sincere «la la contemplons ce, fait dont doué grimace.',
            comments: [{ id: '0', author: 'aa', time: 'aa', comment: 'abc' }]
        },
        {
            id: '2', title: 'Warum mit nun der des', content: 'Et somptueux et les apres-demain décor moqueur mon corps trait femme. Sincere «la la contemplons ce, fait dont doué grimace.',
            comments: [{ id: '0', author: 'aa', time: 'aa', comment: 'abc' }]
        },
        {
            id: '3', title: 'Warum mit nun der des', content: 'Et somptueux et les apres-demain décor moqueur mon corps trait femme. Sincere «la la contemplons ce, fait dont doué grimace.',
            comments: [{ id: '0', author: 'aa', time: 'aa', comment: 'abc' }]
        },
        {
            id: '4', title: 'Warum mit nun der des', content: 'Et somptueux et les apres-demain décor moqueur mon corps trait femme. Sincere «la la contemplons ce, fait dont doué grimace.',
            comments: [{ id: '0', author: 'aa', time: 'aa', comment: 'abc' }]
        },
        {
            id: '5', title: 'Warum mit nun der des', content: 'Et somptueux et les apres-demain décor moqueur mon corps trait femme. Sincere «la la contemplons ce, fait dont doué grimace.',
            comments: [{ author: 'aa', time: 'aa', comment: 'abc' }]
        }


    ]
}

const postReducer = (state = initState, action) => {
    return state;
}

export default postReducer;

PostSummary.js

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import clsx from 'clsx';
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 Collapse from '@material-ui/core/Collapse';
import Avatar from '@material-ui/core/Avatar';
import IconButton from '@material-ui/core/IconButton';
import Typography from '@material-ui/core/Typography';
import { red } from '@material-ui/core/colors';
import FavoriteIcon from '@material-ui/icons/Favorite';
import ShareIcon from '@material-ui/icons/Share';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import MoreVertIcon from '@material-ui/icons/MoreVert';
import { useSelector } from 'react-redux';
import CommentsSection from './CommentsSection'



const useStyles = makeStyles((theme) => ({
    root: {
        width: "90%"
    },
    media: {
        height: 0,
        paddingTop: '56.25%', // 16:9
    },
    expand: {
        transform: 'rotate(0deg)',
        marginLeft: 'auto',
        transition: theme.transitions.create('transform', {
            duration: theme.transitions.duration.shortest,
        }),
    },
    expandOpen: {
        transform: 'rotate(180deg)',
    },
    avatar: {
        backgroundColor: red[500],
    },
}));

const PostCard = () => {
    const classes = useStyles();
    const [expanded, setExpanded] = React.useState(false);

    const handleExpandClick = () => {
        setExpanded(!expanded);
    };
    const postList = useSelector((state) => state.posts.posts);
    if (postList.length > 0) {
        return (
            postList.map((post) => {
                return (
                    <div key={post.id}>
                        <Card className={classes.root}>
                            <CardHeader
                                avatar={
                                    <Avatar aria-label="recipie" className={classes.avatar}>
                                        {post.title}
                                    </Avatar>
                                }
                                action={
                                    <IconButton aria-label="settings">
                                        <MoreVertIcon />
                                    </IconButton>
                                }
                                title={post.title}
                                subheader="September 14, 2016"
                            />
                            <CardMedia
                                className={classes.media}
                                image="/static/images/cards/paella.jpg"
                                title="Paella dish"
                            />
                            <CardContent>
                                <h4>{post.title}</h4>
                                <Typography paragraph> {post.content.slice(0, 6)}    </Typography>
                            </CardContent>
                            <CardActions disableSpacing>
                                <IconButton aria-label="add to favorites">
                                    <FavoriteIcon />
                                </IconButton>
                                <IconButton aria-label="share">
                                    <ShareIcon />
                                </IconButton>
                                <IconButton
                                    className={clsx(classes.expand, {
                                        [classes.expandOpen]: expanded,
                                    })}
                                    onClick={handleExpandClick}
                                    aria-expanded={expanded}
                                    aria-label="show more"
                                >
                                    <ExpandMoreIcon />
                                </IconButton>
                            </CardActions>
                            <Collapse in={expanded} timeout="auto" unmountOnExit>
                                <CardContent>
                                    <Typography paragraph>
                                        {post.content}
                                    </Typography>
                                    <CommentsSection comments={post.comments} />
                                </CardContent>
                            </Collapse>
                        </Card>
                    </div>)
            })
        )
    } else {
        return (
            <div>No Posts!</div>
        )
    }


}


export default PostCard;

I am assuming the problem lies in.

CommentsSection.js

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import Typography from '@material-ui/core/Typography';

const useStyles = makeStyles({
    root: {
        minWidth: 275,
    },
    bullet: {
        display: 'inline-block',
        margin: '0 2px',
        transform: 'scale(0.8)',
    },
    title: {
        fontSize: 14,
    },
    pos: {
        marginBottom: 12,
    },
});

const CommentsSection = ({ comments }) => {

    const classes = useStyles();
    console.log(comments)
    comments.map((comment) => {
        return (
            <React.Fragment>
                <Card className={classes.root} variant="outlined">
                    <CardContent>
                        <Typography className={classes.title} color="textSecondary" gutterBottom component="p">
                            {comment.author}
                        </Typography>
                        <Typography className={classes.pos} color="textSecondary" component="p">
                            {comment.time}
                        </Typography>
                        <Typography variant="body2" component="p">
                            {comment.text}
                            <br />
                        </Typography>
                    </CardContent>
                </Card>
            </React.Fragment>
        )
    }
    )
}

export default CommentsSection;

Answer 1

You forgot to return in the CommentsSection

return comments.map((comment) => {
        return (
            <React.Fragment>
                <Card className={classes.root} variant="outlined">
                    <CardContent>
                        <Typography className={classes.title} color="textSecondary" gutterBottom component="p">
                            {comment.author}
                        </Typography>
                        <Typography className={classes.pos} color="textSecondary" component="p">
                            {comment.time}
                        </Typography>
                        <Typography variant="body2" component="p">
                            {comment.text}
                            <br />
                        </Typography>
                    </CardContent>
                </Card>
            </React.Fragment>
        )
    }
    )