Maison > Questions et réponses > le corps du texte
J'ai un formulaire en plusieurs étapes et lorsque j'essaie de le soumettre, cette erreur s'affiche. Cependant, si j'utilise le planning createOrganization sous sa forme simple, cela fonctionne. Est-ce un problème de back-end ou de front-end ? Qu’aurais-je pu faire de mal ? J'apprécierais tous les conseils
Onboarding.jsx
import Stepper from "./components/Stepper"; import Account from "./components/steps/Account"; import Details from "./components/steps/Details"; import Payment from "./components/steps/Payment"; import { createOrganization } from "../../../features/organization/organizationSlice"; const Onboarding = () => { const toast = useToast() const [step, setStep] = useState(0); const steps = ["", "", "",]; const navigate = useNavigate(); const dispatch = useDispatch(); const { organization, isError, isSuccess, message } = useSelector( (state) => state.organization ); const [formData, setFormData] = useState({ businessName: "", businessEmail: "", currency: "", industry: "", businessDescription: "", useCase: "", organizationType: "", website: "", businessPhone: "", country: "", billingName: "", billingEmail: "", addressState: "", addressCity: "", addressStreet: "" }); const displayStep = () => { switch (step) { case 0: return <Account formData={formData} setFormData={setFormData} />; case 1: return <Details formData={formData} setFormData={setFormData} />; case 2: return <Payment formData={formData} setFormData={setFormData} />; default: } }; const handleSubmit = () => { dispatch(createOrganization(formData)) } }; return ( <Stepper steps={steps} step={step} /> <div className="my-5 p-10 "> <div>{displayStep()}</div> {step > 0 && <Button onClick={() => setStep(step - 1)}>Back</Button>} <Button onClick={handleSubmit}> { step === 0 || step === 1 ? "Next" : "Submit" } </Button>
Organiser Slice.jsx
import { createAsyncThunk, createSlice } from "@reduxjs/toolkit"; import organizationService from "./organizationService"; const initialState = { organization: [], isLoading: false, isError: false, isSuccess: false, message: "", }; export const createOrganization = createAsyncThunk( "organization/createOrganization", async (organization, thunkAPI) => { try { const token = thunkAPI.getState().auth.user.token; console.log("USER TOKEN", token); return await organizationService.createOrganization(organization, token); } catch (error) { const message = (error.response && error.response.data && error.response.data.message) || error.message || error.toString(); return thunkAPI.rejectWithValue(message); } } ); export const organizationSlice = createSlice({ name: "organization", initialState, extraReducers: (builder) => { builder .addCase(createOrganization.pending, (state) => { state.isLoading = true; state.isError = false; }) .addCase(createOrganization.fulfilled, (state, action) => { state.isLoading = false; state.isSuccess = true; state.organization = action.payload; }) .addCase(createOrganization.rejected, (state, action) => { state.isLoading = false; state.isError = true; state.message = action.payload; }); }, }); export default organizationSlice.reducer;
Service d'organisation.jsx
import axios from "axios"; // Create Business const createOrganization = async (formData, token) => { const config = { headers: { Authorization: `Bearer ${token}`, }, }; const response = await axios.post( `${LOCAL}/api/v1/organization/create-business`, formData, config ); return response.data; }; const organizationService = { createOrganization, }; export default organizationService;
P粉5660487902024-04-07 11:17:19
Il doit être async({formData}, token), et non async(formData, token)
Mise à jour : apparemment, cela renvoie null dans tous les champs
import axios from "axios"; // Create Business const createOrganization = async ({formData}, token) => { const config = { headers: { Authorization: `Bearer ${token}`, }, }; const response = await axios.post( `${LOCAL}/api/v1/organization/create-business`, formData, config ); return response.data; }; const organizationService = { createOrganization, }; export default organizationService;