Django向React传递多模板变量及数组map方法失效问题求助

问题1：多变量跨页面传递报错 #

原因 #

访问/posts/列表页时，post_list视图仅传递了posts变量，模板渲染时找不到post变量就会输出空值，直接赋值给JS变量会触发语法错误。

解决方案 #

给两个视图补全所有需要用到的变量，不存在的变量传入JSON序列化后的空值即可：
修改views.py代码：

def post_list(request):
    posts = Post.published.all()
    serializer = PostSerializer(posts, many=True)
    json_posts = json.dumps(serializer.data)
    # 列表页无单条post，传入序列化后的null
    return render(request, 'frontend/index.html', {'posts': json_posts, 'post': json.dumps(None)})


def post_detail(request, year, month, day, post):
    post = get_object_or_404(Post, slug=post,
                             status='published',
                             publish__year=year,
                             publish__month=month,
                             publish__day=day)
    # 详情页无帖子列表，传入序列化后的空数组，单条数据也序列化后传递
    serializer = PostSerializer(post)
    return render(request,
                  'frontend/index.html',
                  {'posts': json.dumps([]), 'post': json.dumps(serializer.data)})

模板index.html的script部分直接赋值即可，不需要额外加引号：

<script>
  const posts = {{ posts|safe }};
  const post = {{ post|safe }};
</script>

问题2：posts调用map方法失效，输出字符数组 #

原因 #

你给{{ posts|safe }}额外加了引号，把JSON字面量转成了普通字符串，执行[posts].map相当于把字符串拆成了单个字符的数组，自然无法正常遍历。
按上述视图修改后，posts本身就是合法的JS数组，直接调用map方法即可：

posts.map((post, index) => 
    <p key={index}>{post.title}</p>
)

问题3：将get_absolute_url传递到React组件 #

在Post序列化器中新增url字段，把模型的方法输出到序列化结果中即可：

from rest_framework import serializers
from .models import Post

class PostSerializer(serializers.ModelSerializer):
    # 新增url字段，值为get_absolute_url的返回结果
    url = serializers.SerializerMethodField()
    class Meta:
        model = Post
        fields = ['id', 'title', 'slug', 'body', 'publish', 'created', 'updated', 'status', 'author', 'url']
    
    def get_url(self, obj):
        return obj.get_absolute_url()

之后React组件中直接用post.url作为a标签的href属性即可：

posts.map((post, index) => 
    <a key={index} href={post.url}>
        <p>{post.title}</p>
    </a>
)

注意：你的Post模型中status字段默认值存在拼写错误，定义的可选值为project，你写的默认值是projekt，请修正避免后续数据异常。

内容的提问来源于stack exchange，提问作者AUOI