无法在浏览器上以react js显示博客评论

Question

在react组件中，有一个用于发布注释的表单。当我发布评论时，它会被提交并显示在数据库中。使用地图功能，我试图在浏览器上显示博客评论，但它不会出现在浏览器上。我可以在redux devtools中看到一组注释。

<Container className="content">
<div>
<h1 className='display-2'>{blog.title}</h1>
<Image src={blog.image} />
<h2 className='text-muted mt-3'>Category: {blog.category}</h2>
<div className='mt-5 mb-5' dangerouslySetInnerHTML={createBlog()} />
</div>
<div>

{blog?.post?.comments.length === 0 && <Message variant='info'>No comment yet</Message>}
<div>
{blog?.post?.comments.map((comment) => (
<div key={comment?.id}>
<strong>{comment?.name}</strong>            
<p>{comment?.dateCreated.substring(0, 10)}</p>
<p>{comment?.comment}</p>
</div>
))}
</div>

{blogCommentLoading && <Loader />}
{blogCommentSuccess && <Message variant='success'>Comment Submitted</Message>}
{blogCommentError && <Message variant='danger'>{blogCommentError}</Message>}
<Form onSubmit={submitHandler}>
<Form.Group controlId='comment'>
<Form.Label>Comment</Form.Label> {/* The label called review is named comment in the database(backend)*/}
<Form.Control
as='textarea'
row='5'
value={comment}
onChange={(e) => setComment(e.target.value)}
></Form.Control>
</Form.Group>
<Button type='submit' variant='primary'>Submit</Button>
</Form>
</div>
</Container>

);
};

我错过了什么？我如何在浏览器上显示评论？

Answer 1

更换

{blog?.post?.comments.length === 0 && <Message variant='info'>No comment yet</Message>}
<div>
{blog.post.comments.map((comment) => (
<div key={comment?.id}>
<strong>{comment?.name}</strong>            
<p>{comment?.dateCreated.substring(0, 10)}</p>
<p>{comment?.comment}</p>
</div>
))}
</div>

带有：

{!blog?.post?.comments?.length ? (
<Message variant='info'>No comment yet</Message>
) : (
<div>
{blog?.post?.comments.map((comment) => (
<div key={comment?.id}>
<strong>{comment?.name}</strong>            
<p>{comment?.dateCreated.substring(0, 10)}</p>
<p>{comment?.comment}</p>
</div>
))}
</div>
)}