Javascript 错误：CommentsSection（…）：渲染未返回任何内容

我正在尝试制作一个包含多个材质UI卡组件的简单页面&redux，它模仿基本的社交媒体页面。页面加载良好，但每当我尝试展开卡时，它都会抛出一个错误，即没有返回任何内容。我尝试了console.log输出，效果很好。可能是什么错误？可能的解决办法是什么

我理解是零件导致了错误。我在这里复制了这两个代码。我还提供了redux存储中的状态，所有内容都从该状态下载到各种文件中

Redux商店

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;

从“React”导入React；
从'@material ui/core/styles'导入{makeStyles}；
从“clsx”导入clsx；
从“@material ui/core/Card”导入卡片；
从“@material ui/core/CardHeader”导入CardHeader；
从“@material ui/core/CardMedia”导入CardMedia；
从“@material ui/core/CardContent”导入CardContent；
从“@material ui/core/CardActions”导入CardActions；
从“@material ui/core/Collapse”导入折叠；
从“@material ui/core/Avatar”导入化身；
从“@material ui/core/IconButton”导入IconButton；
从“@material ui/core/Typography”导入排版；
从'@material ui/core/colors'导入{red}；
从“@material ui/icons/Favorite”导入收藏夹图标；
从“@material ui/icons/Share”导入ShareIcon；
从“@material ui/icons/ExpandMore”导入ExpandMoreIcon；
从“@material ui/icons/MoreVert”导入MoreVertIcon；
从'react redux'导入{useSelector}；
从“/CommentsSection”导入CommentsSection
const useStyles=makeStyles（（主题）=>({
根目录：{
宽度：“90%”
},
媒体：{
高度:0,，
paddingTop:'56.25%'，//16:9
},
扩展：{
变换：“旋转（0度）”，
marginLeft:'自动'，
转换：theme.transitions.create（'transform'{
持续时间：theme.transitions.duration.shortest，
}),
},
expandOpen：{
变换：“旋转（180度）”，
},
化身：{
背景颜色：红色[500]，
},
}));
康斯特明信片=（）=>{
const classes=useStyles（）；
const[expanded，setExpanded]=React.useState（false）；
常量handleExpandClick=（）=>{
setExpanded（！expanded）；
};
const postList=useSelector（（state）=>state.posts.posts）；
如果（postList.length>0）{
返回(
postList.map（（post）=>{
返回(
{post.title}
{post.content.slice（0,6）}
{post.content}
)
})
)
}否则{
返回(
没有帖子！
)
}
}
导出默认明信片；

我想问题在于

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;

从“React”导入React；
从'@material ui/core/styles'导入{makeStyles}；
从“@material ui/core/Card”导入卡片；
从“@material ui/core/CardContent”导入CardContent；
从“@material ui/core/Typography”导入排版；
const useStyles=makeStyles({
根目录：{
最小宽度：275，
},
要点：{
显示：“内联块”，
边距：“0 2px”，
变换：“比例（0.8）”，
},
标题：{
尺寸：14，
},
pos:{
marginBottom:12，
},
});
const CommentsSection=（{comments}）=>{
const classes=useStyles（）；
console.log（注释）
comments.map（（comment）=>{
返回(
{comment.author}
{comment.time}
{comment.text}


)
}
)
}
导出默认注释节；

您忘记在Comments部分返回

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

返回注释.map（（注释）=>{
返回(
{comment.author}
{comment.time}
{comment.text}


)
}
)

Ohh上帝。我怎么会错过这个！