我有一个多步骤的形式,显示此错误,当我试图提交它。但是如果我以简单的形式使用createOrganization调度,它就可以工作。这是后端问题还是前端问题?我能做错什么?我很乐意任何提示请
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>
organizationSlice.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;
organizationService.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;
1条答案
按热度按时间ux6nzvsh1#
而不是async(formData,token),它应该是async({formData},token)
更新:显然这样做会在所有字段中返回null