Ungültiges untergeordnetes React-Element (gefunden: Objekt mit Schlüssel {clientVersion}). Wenn Sie eine Sammlung untergeordneter Elemente rendern möchten, verwenden Sie stattdessen ein Array

Question

Ich habe ein mehrstufiges Formular und wenn ich versuche, es abzusenden, wird dieser Fehler angezeigt. Wenn ich jedoch den Zeitplan „createOrganization“ in seiner einfachen Form verwende, funktioniert es. Handelt es sich um ein Back-End-Problem oder ein Front-End-Problem? Was könnte ich falsch gemacht haben? Ich würde mich über jeden Tipp freuen

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>

Slice.jsx organisieren

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;

Organization Service.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;

Answer 1

它应该是异步（{formData}，令牌），而不是异步（formData，令牌）

更新：显然这样做会在所有字段中返回 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;