无法在反应js中在浏览器上显示博客评论

Question

在 React 组件中，有一个用于 post 评论的表单。当我 post 发表评论时，它会被提交并出现在数据库中。使用地图功能，我试图在浏览器上显示博客评论，但它并没有出现在浏览器上。我可以在 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>
)}

无法在反应js中在浏览器上显示博客评论

Unable to display blog comments on the browser in react js

javascript

arrays

reactjs

react-redux