错误 400 请求无效，与 React 和 RTKQ 中的表单有关。

huangapple
go评论136阅读模式
英文:

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."

  1. import Button from "@/components/utils/button/button.component";
  2. import { InputController } from "@/components/utils/input/input-controller.component";
  3. import Modal from "@/components/utils/modal/modal.component";
  4. import { TextAreaController } from "@/components/utils/textarea/textarea-controller.component";
  5. import {
  6.   useAddComplianceRequirementMutation,
  7.   useGetComplianceRequirementByIdQuery,
  8.   useUpdateComplianceRequirementMutation,
  9. } from "@/infrastructure/slice/compliance-requirement.slice";
  10. import { useForm } from "react-hook-form";
  11. import { useParams } from "react-router-dom";
  13. type Props = {
  14.   onClose: () => void;
  15. };
  16. const AddRequirementsGroupModal: React.FC<Props> = ({ onClose }) => {
  17.   const { control, handleSubmit } = useForm();
  18.   const { complianceId, id } = useParams();
  20.   const [addRequirement, { isLoading: isAddLoading }] =
  21.     useAddComplianceRequirementMutation();
  22.   const [updateComplianceRequirement, { isLoading: isUpdateLoading }] =
  23.     useUpdateComplianceRequirementMutation();
  25.   const { data: groupData, isLoading } = useGetComplianceRequirementByIdQuery(
  26.     { id },
  27.     { skip: !id }
  28.   );
  30.   const onSubmit = handleSubmit(async (data) => {
  31.     const sendData = {
  32.       ...data,
  33.       packageId: complianceId,
  34.       type: 1,
  35.       complianceId,
  36.     };
  37.     try {
  38.       if (id) {
  39.         await updateComplianceRequirement({
  40.           ...sendData,
  41.           id,
  42.         });
  43.         onClose();
  44.       } else {
  45.         await addRequirement(sendData);
  46.         onClose();
  47.       }
  48.     } catch (e) {
  49.       console.log(e);
  50.     }
  51.   });
  53.   return (
  54.     <>
  55.       <Modal
  56.         isOpen
  57.         onClose={onClose}
  58.         title="اضافه کردن گروه الزامات"
  59.         isLoading={isLoading}
  60.       >
  61.         <form onSubmit={onSubmit}>
  62.           <InputController
  63.             control={control}
  64.             name="label"
  65.             label="عنوان گروه الزامات"
  66.             requiredInput
  67.             rules={{ required: "لطفا عنوان گروه الزامات را وارد کنید." }}
  68.             defaultValue={groupData?.label}
  69.           />
  70.           <TextAreaController
  71.             control={control}
  72.             name="title"
  73.             defaultValue={groupData?.title}
  74.           />
  75.           <div className="flex gap-2">
  76.             <InputController
  77.               control={control}
  78.               name="value"
  79.               label="وزن گروه الزامات"
  80.               requiredInput
  81.               rules={{ required: "لطفا وزن گروه الزامات را وارد کنید." }}
  82.               type="number"
  83.               defaultValue={groupData?.value}
  84.             />
  85.             <InputController
  86.               control={control}
  87.               name="code"
  88.               label="کد"
  89.               requiredInput
  90.               rules={{ required: "لطفا فصل گروه الزامات را مشخص کنید." }}
  91.               defaultValue={groupData?.code}
  92.             />
  93.           </div>
  94.           <TextAreaController
  95.             control={control}
  96.             name="description"
  97.             label="توضیحات گروه الزامات"
  98.             defaultValue={groupData?.description}
  99.           />
  100.           <div className="flex justify-start gap-2">
  101.             <Button size="sm" loading={isAddLoading || isUpdateLoading}>
  102.               ثبت گروه
  103.             </Button>
  104.             <Button color="danger" onClick={onClose}>
  105.               انصراف
  106.             </Button>
  107.           </div>
  108.         </form>
  109.       </Modal>
  110.     </>
  111.   );
  112. };
  114. export default AddRequirementsGroupModal;

"and if it helps here are my add request:"

  1. addComplianceRequirement: builder.mutation({
  2.   query: (body) => ({
  3.     url: "/packageitem",
  4.     method: "POST",
  5.     body,
  6.   })
  7. })

"and this is my update request :"

  1. updateComplianceRequirement: builder.mutation({
  2.   query: ({ id, body }) => ({
  3.     url: `/packageitem/${id}`,
  4.     method: 'POST',
  5.     body,
  6.   })
  7. })
英文:

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.

  1. import Button from &quot;@/components/utils/button/button.component&quot;;
  2. import { InputController } from &quot;@/components/utils/input/input-controller.component&quot;;
  3. import Modal from &quot;@/components/utils/modal/modal.component&quot;;
  4. import { TextAreaController } from &quot;@/components/utils/textarea/textarea-controller.component&quot;;
  5. import {
  6. useAddComplianceRequirementMutation,
  7. useGetComplianceRequirementByIdQuery,
  8. useUpdateComplianceRequirementMutation,
  9. } from &quot;@/infrastructure/slice/compliance-requirement.slice&quot;;
  10. import { useForm } from &quot;react-hook-form&quot;;
  11. import { useParams } from &quot;react-router-dom&quot;;
  12. type Props = {
  13. onClose: () =&gt; void;
  14. };
  15. const AddRequirementsGroupModal: React.FC&lt;Props&gt; = ({ onClose }) =&gt; {
  16. const { control, handleSubmit } = useForm();
  17. const { complianceId, id } = useParams();
  18. const [addRequirement, { isLoading: isAddLoading }] =
  19. useAddComplianceRequirementMutation();
  20. const [updateComplianceRequirement, { isLoading: isUpdateLoading }] =
  21. useUpdateComplianceRequirementMutation();
  22. const { data: groupData, isLoading } = useGetComplianceRequirementByIdQuery(
  23. { id },
  24. { skip: !id }
  25. );
  26. const onSubmit = handleSubmit(async (data) =&gt; {
  27. const sendData = {
  28. ...data,
  29. packageId: complianceId,
  30. type: 1,
  31. complianceId,
  32. };
  33. try {
  34. if (id) {
  35. await updateComplianceRequirement({
  36. ...sendData,
  37. id,
  38. });
  39. onClose();
  40. } else {
  41. await addRequirement(sendData);
  42. onClose();
  43. }
  44. } catch (e) {
  45. console.log(e);
  46. }
  47. });
  48. return (
  49. &lt;&gt;
  50. &lt;Modal
  51. isOpen
  52. onClose={onClose}
  53. title=&quot;اضافه کردن گروه الزامات&quot;
  54. isLoading={isLoading}
  55. &gt;
  56. &lt;form onSubmit={onSubmit}&gt;
  57. &lt;InputController
  58. control={control}
  59. name=&quot;label&quot;
  60. label=&quot;عنوان گروه الزامات&quot;
  61. requiredInput
  62. rules={{ required: &quot;لطفا عنوان گروه الزامات را وارد کنید.&quot; }}
  63. defaultValue={groupData?.label}
  64. /&gt;
  65. &lt;TextAreaController
  66. control={control}
  67. name=&quot;title&quot;
  68. defaultValue={groupData?.title}
  69. /&gt;
  70. &lt;div className=&quot;flex gap-2&quot;&gt;
  71. &lt;InputController
  72. control={control}
  73. name=&quot;value&quot;
  74. label=&quot;وزن گروه الزامات&quot;
  75. requiredInput
  76. rules={{ required: &quot;لطفا وزن گروه الزامات را وارد کنید.&quot; }}
  77. type=&quot;number&quot;
  78. defaultValue={groupData?.value}
  79. /&gt;
  80. &lt;InputController
  81. control={control}
  82. name=&quot;code&quot;
  83. label=&quot;کد&quot;
  84. requiredInput
  85. rules={{ required: &quot;لطفا فصل گروه الزامات را مشخص کنید.&quot; }}
  86. defaultValue={groupData?.code}
  87. /&gt;
  88. &lt;/div&gt;
  89. &lt;TextAreaController
  90. control={control}
  91. name=&quot;description&quot;
  92. label=&quot;توضیحات گروه الزامات&quot;
  93. defaultValue={groupData?.description}
  94. /&gt;
  95. &lt;div className=&quot;flex justify-start gap-2&quot;&gt;
  96. &lt;Button size=&quot;sm&quot; loading={isAddLoading || isUpdateLoading}&gt;
  97. ثبت گروه
  98. &lt;/Button&gt;
  99. &lt;Button color=&quot;danger&quot; onClick={onClose}&gt;
  100. انصراف
  101. &lt;/Button&gt;
  102. &lt;/div&gt;
  103. &lt;/form&gt;
  104. &lt;/Modal&gt;
  105. &lt;/&gt;
  106. );
  107. };
  108. export default AddRequirementsGroupModal;

and if it helps hera are my add request:

  1.  addComplianceRequirement: builder.mutation({
  2. query: (body) =&gt; ({
  3. url: &quot;/packageitem&quot;,
  4. method: &quot;POST&quot;,
  5. body,
  6. })

and this is my update request :

  1.  updateComplianceRequirement: builder.mutation({
  2. query: ({ id, body }) =&gt; ({
  3. url: `/packageitem/${id}`,
  4. method: &#39;POST&#39;,
  5. body,
  6. })

答案1

得分: 0

这里的问题是...

  1. await updateComplianceRequirement({
  2. ...sendData,
  3. id,
  4. });

这将创建一个像这样的有效载荷

  1. {
  2. "id": 1,
  3. "code": "some code",
  4. "label": "some label",
  5. ...
  6. }

但是你的 updateComplianceRequirement 变异正在寻找一个具有两个属性的对象; id 和 body。

只需在构建有效载荷时将 sendData 放入 body 属性中

  1. await updateComplianceRequirement({ id, body: sendData });

或者更改你的变异为类似以下内容

  1. updateComplianceRequirement: builder.mutation({
  2. query: ({ id, ...body }) => ({ // 将其余部分展开到 `body`
  3. url: `/packageitem/${id}`,
  4. method: 'POST',
  5. body,
  6. })
英文:

The problem is here...

> lang-js
&gt; await updateComplianceRequirement({
&gt; ...sendData,
&gt; id,
&gt; });
&gt;

This will create a payload like

  1. {
  2. &quot;id&quot;: 1,
  3. &quot;code&quot;: &quot;some code&quot;,
  4. &quot;label&quot;: &quot;some label&quot;,
  5. ...
  6. }

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

  1. await updateComplianceRequirement({ id, body: sendData });

or change your mutation to something like

  1. updateComplianceRequirement: builder.mutation({
  2. query: ({ id, ...body }) =&gt; ({ // spread the rest into `body`
  3. url: `/packageitem/${id}`,
  4. method: &#39;POST&#39;,
  5. body,
  6. })

huangapple
  • 本文由 发表于 2023年7月11日 14:44:48
  • 转载请务必保留本文链接：https://go.coder-hub.com/76659301.html
  • javascript
  • react-hook-form
  • reactjs
  • rtk-query
  • typescript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定