我是Django的新手,希望对高级用户来说这是一个简单的问题。 我正在尝试使用React表单(前端)向Django rest API中的嵌套对象提交发布/发布请求。
下面是嵌套对象的外观,该表称为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提交信息。
任何帮助将不胜感激!谢谢。
答案 0 :(得分:1)
在客户端,您需要以API能够理解有效负载的方式来构造有效负载。
您可以将表格中的信息与所需的任何字段进行整理。但是,当您提交给API时,根据API的格式必须正确。
因此,在React表单中,您可能希望基于填充的表单字段以状态构建一个对象。
这看起来像:
{
first_name: "John",
last_name: "Smith",
address: {
suburb: "",
street: "",
town: ""
}
}
您需要检查Django API接受有效负载的格式。