redux 对象作为React子对象无效(找到:object with keys {clientVersion})如果你想呈现一个子元素的集合,请使用数组

brccelvz  于 2023-05-07  发布在  React
关注(0)|答案(1)|浏览(58)

我有一个多步骤的形式,显示此错误,当我试图提交它。但是如果我以简单的形式使用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;
ux6nzvsh

ux6nzvsh1#

而不是async(formData,token),它应该是async({formData},token)
更新:显然这样做会在所有字段中返回null

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;

相关问题