错误:CommentsSection(..):渲染未返回任何内容

Question

我正在尝试制作一个包含多个Material UI卡组件的简单页面&redux，它模仿了一个基本的社交媒体页面。页面加载良好，但每当我尝试扩展卡时，它都会抛出一个错误，即没有返回任何内容。我试着安慰日志输出，结果很好。可能是什么错误？可能的解决方案是什么？

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

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;

我认为问题出在。

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

您忘记在注释部分返回

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