英文:
error 400 bad request with form in react and RTKQ
问题
以下是您要翻译的内容：
"i have a form that i want to add or update an item with it. for both adding and updating i use POST request. if i have a id param in my url i want to update the item and if there is no id i want to add item. for adding every thing works fine but when i want to update i got 400 bad request that says some of my form data are required. i used same structure for my form data in adding item that worked fine."
import Button from "@/components/utils/button/button.component";
import { InputController } from "@/components/utils/input/input-controller.component";
import Modal from "@/components/utils/modal/modal.component";
import { TextAreaController } from "@/components/utils/textarea/textarea-controller.component";
import {
useAddComplianceRequirementMutation,
useGetComplianceRequirementByIdQuery,
useUpdateComplianceRequirementMutation,
} from "@/infrastructure/slice/compliance-requirement.slice";
import { useForm } from "react-hook-form";
import { useParams } from "react-router-dom";
type Props = {
onClose: () => void;
};
const AddRequirementsGroupModal: React.FC<Props> = ({ onClose }) => {
const { control, handleSubmit } = useForm();
const { complianceId, id } = useParams();
const [addRequirement, { isLoading: isAddLoading }] =
useAddComplianceRequirementMutation();
const [updateComplianceRequirement, { isLoading: isUpdateLoading }] =
useUpdateComplianceRequirementMutation();
const { data: groupData, isLoading } = useGetComplianceRequirementByIdQuery(
{ id },
{ skip: !id }
);
const onSubmit = handleSubmit(async (data) => {
const sendData = {
...data,
packageId: complianceId,
type: 1,
complianceId,
};
try {
if (id) {
await updateComplianceRequirement({
...sendData,
id,
});
onClose();
} else {
await addRequirement(sendData);
onClose();
}
} catch (e) {
console.log(e);
}
});
return (
<>
<Modal
isOpen
onClose={onClose}
title="اضافه کردن گروه الزامات"
isLoading={isLoading}
>
<form onSubmit={onSubmit}>
<InputController
control={control}
name="label"
label="عنوان گروه الزامات"
requiredInput
rules={{ required: "لطفا عنوان گروه الزامات را وارد کنید." }}
defaultValue={groupData?.label}
/>
<TextAreaController
control={control}
name="title"
defaultValue={groupData?.title}
/>
<div className="flex gap-2">
<InputController
control={control}
name="value"
label="وزن گروه الزامات"
requiredInput
rules={{ required: "لطفا وزن گروه الزامات را وارد کنید." }}
type="number"
defaultValue={groupData?.value}
/>
<InputController
control={control}
name="code"
label="کد"
requiredInput
rules={{ required: "لطفا فصل گروه الزامات را مشخص کنید." }}
defaultValue={groupData?.code}
/>
</div>
<TextAreaController
control={control}
name="description"
label="توضیحات گروه الزامات"
defaultValue={groupData?.description}
/>
<div className="flex justify-start gap-2">
<Button size="sm" loading={isAddLoading || isUpdateLoading}>
ثبت گروه
</Button>
<Button color="danger" onClick={onClose}>
انصراف
</Button>
</div>
</form>
</Modal>
</>
);
};
export default AddRequirementsGroupModal;
"and if it helps here are my add request:"
addComplianceRequirement: builder.mutation({
query: (body) => ({
url: "/packageitem",
method: "POST",
body,
})
})
"and this is my update request :"
updateComplianceRequirement: builder.mutation({
query: ({ id, body }) => ({
url: `/packageitem/${id}`,
method: 'POST',
body,
})
})
英文:
i have a form that i want to add or update an item with it. for both adding and updating i use POST request. if i have a id param in my url i want to update the item and if there is no id i want to add item. for adding every thing works fine but when i want to update i got 400 bad request that says some of my form data are required. i used same structure for my form data in adding item that worked fine.
import Button from "@/components/utils/button/button.component";
import { InputController } from "@/components/utils/input/input-controller.component";
import Modal from "@/components/utils/modal/modal.component";
import { TextAreaController } from "@/components/utils/textarea/textarea-controller.component";
import {
useAddComplianceRequirementMutation,
useGetComplianceRequirementByIdQuery,
useUpdateComplianceRequirementMutation,
} from "@/infrastructure/slice/compliance-requirement.slice";
import { useForm } from "react-hook-form";
import { useParams } from "react-router-dom";
type Props = {
onClose: () => void;
};
const AddRequirementsGroupModal: React.FC<Props> = ({ onClose }) => {
const { control, handleSubmit } = useForm();
const { complianceId, id } = useParams();
const [addRequirement, { isLoading: isAddLoading }] =
useAddComplianceRequirementMutation();
const [updateComplianceRequirement, { isLoading: isUpdateLoading }] =
useUpdateComplianceRequirementMutation();
const { data: groupData, isLoading } = useGetComplianceRequirementByIdQuery(
{ id },
{ skip: !id }
);
const onSubmit = handleSubmit(async (data) => {
const sendData = {
...data,
packageId: complianceId,
type: 1,
complianceId,
};
try {
if (id) {
await updateComplianceRequirement({
...sendData,
id,
});
onClose();
} else {
await addRequirement(sendData);
onClose();
}
} catch (e) {
console.log(e);
}
});
return (
<>
<Modal
isOpen
onClose={onClose}
title="اضافه کردن گروه الزامات"
isLoading={isLoading}
>
<form onSubmit={onSubmit}>
<InputController
control={control}
name="label"
label="عنوان گروه الزامات"
requiredInput
rules={{ required: "لطفا عنوان گروه الزامات را وارد کنید." }}
defaultValue={groupData?.label}
/>
<TextAreaController
control={control}
name="title"
defaultValue={groupData?.title}
/>
<div className="flex gap-2">
<InputController
control={control}
name="value"
label="وزن گروه الزامات"
requiredInput
rules={{ required: "لطفا وزن گروه الزامات را وارد کنید." }}
type="number"
defaultValue={groupData?.value}
/>
<InputController
control={control}
name="code"
label="کد"
requiredInput
rules={{ required: "لطفا فصل گروه الزامات را مشخص کنید." }}
defaultValue={groupData?.code}
/>
</div>
<TextAreaController
control={control}
name="description"
label="توضیحات گروه الزامات"
defaultValue={groupData?.description}
/>
<div className="flex justify-start gap-2">
<Button size="sm" loading={isAddLoading || isUpdateLoading}>
ثبت گروه
</Button>
<Button color="danger" onClick={onClose}>
انصراف
</Button>
</div>
</form>
</Modal>
</>
);
};
export default AddRequirementsGroupModal;
and if it helps hera are my add request:
addComplianceRequirement: builder.mutation({
query: (body) => ({
url: "/packageitem",
method: "POST",
body,
})
and this is my update request :
updateComplianceRequirement: builder.mutation({
query: ({ id, body }) => ({
url: `/packageitem/${id}`,
method: 'POST',
body,
})
答案1
得分: 0
这里的问题是...
await updateComplianceRequirement({
...sendData,
id,
});
这将创建一个像这样的有效载荷
{
"id": 1,
"code": "some code",
"label": "some label",
...
}
但是你的 updateComplianceRequirement 变异正在寻找一个具有两个属性的对象; id 和 body。
只需在构建有效载荷时将 sendData 放入 body 属性中
await updateComplianceRequirement({ id, body: sendData });
或者更改你的变异为类似以下内容
updateComplianceRequirement: builder.mutation({
query: ({ id, ...body }) => ({ // 将其余部分展开到 `body`
url: `/packageitem/${id}`,
method: 'POST',
body,
})
英文:
The problem is here...
> lang-js
> await updateComplianceRequirement({
> ...sendData,
> id,
> });
>
This will create a payload like
{
"id": 1,
"code": "some code",
"label": "some label",
...
}
but your updateComplianceRequirement mutation is looking for an object with two properties; id and body.
Simply place the sendData into a body property when constructing the payload
await updateComplianceRequirement({ id, body: sendData });
or change your mutation to something like
updateComplianceRequirement: builder.mutation({
query: ({ id, ...body }) => ({ // spread the rest into `body`
url: `/packageitem/${id}`,
method: 'POST',
body,
})
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论