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

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 接受负载的格式。