ReactJS & django-forms

Question

我在django后端有一个模型，带有验证器、choicefields等等。我想传递它来响应和显示它。首先，这是可能的吗？我想用验证器来完成它，但是仅仅html仍然很棒。其原因是：

1. 避免在前面和后面的双常声明。例如，选择选项：“男性”、“女性”、“？？”需要在后端进行验证，并在前端显示和验证。
2. 再次在表单的前端构建整个html，尽管django也可以轻松地创建所有的html。主要关注的是，再次选择具有许多不同自定义值的选项。

有一个名为drf-支撑的包，它有一个FormSerializer，但是它似乎确实有一个问题，我经常收到一个500个错误“不是JSON可序列化的错误”，如下所示：

name_or_event = CharFormSerializerField(error_messages={u'required':
<django.utils.functional.__proxy__ object>}, help_text='', initial=None, 
label='Name', required=True, validators=[]) is not JSON serializable

这是基于drf大括号的序列化程序，如drf大括号形式序列化示例中所示：

from drf_braces.serializers.form_serializer import FormSerializer

from myapp.forms import SignupDataForm

class MySerializer(FormSerializer):
    class Meta(object):
        form = SignupDataForm

以及基于休养 RegisterView的API视图：

from myapp.serializers import MySerializer

class TestView(RegisterView):

    permission_classes = (AllowAny,)
    allowed_methods = ('GET', )
    serializer_class = MySerializer

    def get(self, *args, **kwargs):
        serializer = self.serializer_class()
        return Response({'serializer': serializer}, status=status.HTTP_200_OK)

如果在浏览器中打开分配给TestView的url，我可以看到表单字段。但是当使用ajax从react加载时，我得到了上面“不是JSON可串行化的错误”的500。调用是从React.component构造函数(如bellow )发出的。我并不是说它会正确地显示字段，到目前为止，我主要是尝试打印响应来控制台，看看它抛出了什么错误，但它并没有达到那么远：

loadUserDetail() {
    this.serverRequest = $.get("myUrl", function (result) {
      console.log(result);
      this.setState({
        username: result.name_or_event,
        email: result.email
      });
    }.bind(this));
}

还有什么其他的办法吗？我的方法完全错了，对吗？

Answer 1

在我看来，将django生成的表单和React混合在一起将是一片混乱。一种更简洁的方法是让React处理前端端，并使用Django只公开一个JSON。除非您使用Nodejs并在服务器上做出反应(React支持服务器端呈现)，否则不可能呈现表单服务器端，然后让render从那里“拾取”。

Python代码的问题是，DRF序列化程序应该读取发送到服务器的输入，并序列化希望作为响应发送的数据。ModelSerializer知道如何对Django模型进行json编码，在您的代码中，您要对一个序列化对象进行编码，因为没有神奇的方法可以将该对象转换为json。

我知道您不想重复表单定义和选项，但是您可以很容易地判断您需要在表单中使用的选项/选择。通常，您可以通过在模板中呈现脚本标记来实现这一点，在模板中将任何初始数据作为JSON传递，然后从Js端读取该数据。

class TestView(RegisterView):

    permission_classes = (AllowAny,)
    allowed_methods = ('GET', )


    def get(self, *args, **kwargs):
        initial_data = {'gender_options': [...]}  # anything you need to render the form, must be json-serialisable.
        return Response({'initial_data': json.dumps(initial_data)}, status=status.HTTP_200_OK)

然后在呈现的Django模板中(在实际加载js应用程序文件之前)：

<script>var INITIAL_DATA = {{ initial_data|escapejs }};</script>

小心escapejs，如果您不能绝对确定initial_data只包含可信数据，这可能是一个安全问题。

这时，您就有了js代码全局可用的INITIAL_DATA，因此您可以在此基础上对组件进行反应。

您仍然可以使用Django表单定义来执行服务器端验证。

Answer 2

多亏了法比奥，我现在明白了我的方法是如何行不通的:-)我不确定我是否接受了这个建议，但这似乎是可能的。

注意:我有服务器端呈现。

Note2:完整的新手来响应和序列化&django-rest框架

我最初试图实现的是对我的react文件的这一部分的解决方案：

import React from 'react';
import {Router, Route, Link} from 'react-router';

class GenderField extends React.Component {
    render() {
        return (
                <div className="form-group">
                    <label htmlFor="gender">Gender</label>
                    <input type="text" className="form-control" id="gender"
                           placeholder="Gender" ref="gender"/>
                </div>
                )
            }
}

export default GenderField;

呈现中包含的所有内容都可以从django后端生成，实际上是。为什么要再写一遍？难道没有一种方法可以使用ajax并从后面获取它吗？我想一次又一次从服务器上获取静态内容可能有悖于react哲学.

但是，更广泛..。我正在从开发人员的角度寻找一种方法，在部署之前只做一次:服务器生成html并用它填充jsx文件，然后投入生产或诸如此类的东西。就像django应用..。难道这也不可能，仍然是错误的思维方式吗？