我尝试了很多方法来POST数据到我的后端，这是Django Rest框架。我一直收到"这个字段是必需的"的错误。尽管我的控制台显示所有字段都已填充。
我的代码片段如下:
import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { money } from "../data";
import { CustomButton, FormField, Loader } from "../components";
import { useCreateCampaignMutation } from "../utils/userAuthApi";
import { getToken } from "../utils/index";
const CreateCampaign = () => {
const navigate = useNavigate();
const { access_token } = getToken();
const [createCampaign, { isLoading }] = useCreateCampaignMutation();
const [form, setForm] = useState({
title: "",
description: "",
target: "",
deadline: "",
});
const handleFormFieldChange = (fieldName, e) => {
setForm({ ...form, [fieldName]: e.target.value });
console.log(form);
};
const handleSubmit = async (e) => {
e.preventDefault();
console.log({ form, access_token });
const res = await createCampaign({ form, access_token });
if (res.data) {
console.log(res.data);
} else {
console.log(res.error.data.errors);
}
};
return (
<div className="bg-[#1c1c24] flex justify-center items-center flex-col rounded-[10px] sm:p-10 p-4">
{isLoading && <Loader />}
<div className="flex justify-center items-center p-[16px] sm:min-w-[380px] bg-[#3a3a43] rounded-[10px]">
<h1 className="font-epilogue font-bold sm:text-[25px] text-[18px] leading-[38px] text-white">
Start a Campaign
</h1>
</div>
<form
onSubmit={handleSubmit}
className="w-full mt-[65px] flex flex-col gap-[30px]"
>
<div className="flex flex-wrap gap-[40px]">
{/* <FormField
labelName="Your Name *"
placeholder="John Doe"
inputType="text"
value={form.owner}
handleChange={(e) => handleFormFieldChange("owner", e)}
/> */}
<FormField
labelName="Campaign Title *"
placeholder="Write a title"
inputType="text"
value={form.title}
handleChange={(e) => handleFormFieldChange("title", e)}
/>
</div>
<FormField
labelName="Story *"
placeholder="Write your story"
isTextArea
value={form.description}
handleChange={(e) => handleFormFieldChange("description", e)}
/>
<div className="w-full flex justify-start items-center p-4 bg-[#8c6dfd] h-[120px] rounded-[10px]">
<img
src={money}
alt="money"
className="w-[40px] h-[40px] object-contain"
/>
<h4 className="font-epilogue font-bold text-[25px] text-white ml-[20px]">
You will get 100% of the raised amount
</h4>
</div>
<div className="flex flex-wrap gap-[40px]">
<FormField
labelName="Goal *"
placeholder="ETH 0.50"
inputType="text"
value={form.target}
handleChange={(e) => handleFormFieldChange("target", e)}
/>
<FormField
labelName="End Date *"
placeholder="End Date"
inputType="date"
value={form.deadline}
handleChange={(e) => handleFormFieldChange("deadline", e)}
/>
</div>
<div className="flex justify-center items-center mt-[40px]">
<CustomButton
btnType="submit"
title="Submit new campaign"
styles="bg-[#1dc071]"
/>
</div>
</form>
</div>
);
};
export default CreateCampaign;
userAuthApi.js
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
// Define a service using a base URL and expected endpoints
export const userAuthApi = createApi({
reducerPath: 'userAuthApi',
baseQuery: fetchBaseQuery({ baseUrl: 'http://127.0.0.1:8000/'}),
endpoints: (builder) => ({
createCampaign: builder.mutation({
query: ({ campaignData, access_token }) => {
return {
url: 'campaigns/create/',
method: 'POST',
body: campaignData,
headers: {
'authorization': `Bearer ${access_token}`,
}
}
}
}),
})
})
来自服务器的错误如下:
{"title":["此字段是必需的。"]，"description":["此字段是必需的。"]}
谢谢。
尝试使用useEffect，更改函数调用，尝试使用documentgetID而不是useState检索数据。
尝试在<CustomButton />中显式更新onSubmit={handleSubmit}，而不是在<Form />中