如何通过React前端向Django rest API提交发布/提交请求？

Question

我是Django的新手，希望对高级用户来说这是一个简单的问题。 我正在尝试使用React表单（前端）向Django rest API中的嵌套对象提交post / put请求。

下面是嵌套对象的外观，表称为person 。 它连接到地址表以获取诸如街道，郊区等信息。

{
    "id": 3,
    "last_name": "Kidd",
    "first_name": "Jason",
    "address": [
        {
            "id": 5,
            "street": "13 Sunrise Road",
            "suburb": "Greenhithe",
            "town": "Christchurch",
            "postcode": "2234",
            "address_type": "w"
        }
    ],
    "group": "Customer"
}

我使用了一个名为drf_writable_nested的包来写入嵌套对象。 这是person serializer程序的代码。

from drf_writable_nested import WritableNestedModelSerializer

class PersonSerializer(WritableNestedModelSerializer):
    last_name = serializers.CharField(required=True, max_length=100)
    first_name = serializers.CharField(required=True, max_length=100)
    address = AddressSerializer(many=True)

    class Meta:
        model = Person
        fields = ('id', 'last_name', 'first_name', 'address', 'group')

以下是用于处理提交请求的前端代码，如果提交给它的对象是平坦的（非嵌套），则这种模式可以正常工作。

class ClientForm extends React.Component {

    handleFormSubmit = (event, requestType, id) => {
        event.preventDefault();
        const last_name = event.target.elements.last_name.value;
        const first_name = event.target.elements.first_name.value;

        console.log(last_name, first_name);
        switch ( requestType ) {
            case 'post':
                return axios.post('http://127.0.0.1:8000/api/person/', {
                    last_name: last_name,
                    first_name: first_name
                })
                .then(res => console.log(res))
                .catch(error => console.err(error));
            case 'put':
                return axios.put(`http://127.0.0.1:8000/api/person/${id}/`, {
                    last_name: last_name,
                    first_name: first_name
                })
                .then(res => console.log(res))
                .catch(error => console.error(error));
        }
    }

      render() {
        return (
          <div>
            <Form onSubmit={(event) => this.handleFormSubmit(
                    event,
                    this.props.requestType,
                    this.props.id)}>
              <Form.Item label="Last name" style={{width: "250px"}}>
                <Input name="last_name" placeholder="Enter surname here" />
              </Form.Item>
              <Form.Item label="First name" style={{width: "250px", textAlign: 'center'}} >
                <Input name="first_name" placeholder="Enter first name here" />
              </Form.Item>
              <Form.Item>
                <Button type="primary" htmlType="submit">Submit</Button>
              </Form.Item>
            </Form>
          </div>
        );
      }
}

export default ClientForm;

我的问题是如何修改它以使其与嵌套对象一起使用？ 如果无法修改，那有什么替代方法？ 在表单中，我希望使用诸如last name ， first name ， street ， suburb ， town类的字段来向API提交信息。

任何帮助将非常感激！ 谢谢。

Answer 1

在客户端，您需要以API能够理解的方式来构造有效负载。

您可以将表格中的信息与所需的任何字段进行整理。 但是，当您提交给API时，根据API的格式必须正确。

因此，在React表单中，您可能希望基于已填写的表单字段来构造状态下的对象。

可能看起来像：

{
   first_name: "John",
   last_name: "Smith",
   address: {
      suburb: "",
      street: "",
      town: ""
   }
}

您需要检查Django API接受有效负载的格式。