反应无法读取未定义的属性

Question

想不出我的错误在哪里。无法通过映射来显示博客评论列表。我正在使用 django 并做出反应。从下面的代码中，我尝试用评论评估每个博客 post。但是我无法从博客中获得评论属性。如果我执行类似 {blog.title} 的操作，我会在浏览器上返回博客的标题。由于评论与每个 post 相关联，我尝试从博客 object 获取评论的不同属性（正如我在下面的代码中指定的那样），但我得到的值是未定义的。并拥有以下博客 post 和博客评论模型。

class BlogComment(models.Model):
    post = models.ForeignKey(BlogPost, on_delete=models.SET_NULL, related_name="post_comment",  null=True)
    user = models.ForeignKey(settings.AUTH_USER_MODEL, on_delete=models.SET_NULL, related_name="user_comment", null=True)
    name = models.CharField(max_length=200, null=True, blank=True)
    comment = models.TextField(null=True, blank=True)
    dateCreated = models.DateTimeField(auto_now_add=True)

    def __str__(self):
        return str(self.user.username)

class BlogPost(models.Model):
    ...
    author = models.ForeignKey(settings.AUTH_USER_MODEL, null=True, on_delete=models.CASCADE)
    body = models.TextField()
    dateCreated = models.DateTimeField(auto_now_add=True)
And the serializers for both models are:

class CommentSerializer(serializers.ModelSerializer):
    class Meta:
        model = BlogComment
        fields = '__all__'

class BlogPostSerializer(serializers.ModelSerializer):
    comments = serializers.SerializerMethodField(read_only=True)
    class Meta:
        model = BlogPost
        fields = "__all__"

    def get_comments(self, obj):
        comments = obj.comment_set.all()
        serializer = CommentSerializer(comments, many=True)
        return serializer.data

<h2>{blog.title}</h2>
<img src={blog.image} />
<div variant='flush'>
                    {blog.comments.map((comment) => (
                        <div key={comment.id}>
                            <strong>{comment.name}</strong>            
                            <p>{comment.dateCreated}</p>
                            <p>{comment.comment}</p>
                        </div>
                    ))}
                </div>

评论API运行正常。作为反应，我可以使用表单向每个 post 添加评论，评论将出现在数据库中。但是当我尝试映射以显示每个博客 post 的评论时，我得到了那个错误。我该如何解决这个问题？

Answer 1

你可以在映射前检查数组的长度。或者您可以使用可选链接。

像这样obj?.property

<h2>{blog?.title}</h2>
<img src={blog?.image} />
<div variant='flush'>
                    {blog?.post?.comments.map((comment) => (
                        <div key={comment?.id}>
                            <strong>{comment?.name}</strong>            
                            <p>{comment?.dateCreated}</p>
                            <p>{comment?.comment}</p>
                        </div>
                    ))}
                </div>

反应无法读取未定义的属性

React unable to read property of undefined

django

django-rest-framework

reactjs

react-redux

反应无法读取未定义的 属性

React unable to read property of undefined

django

django-rest-framework

reactjs

react-redux

反应无法读取未定义的属性