Élément enfant React non valide (trouvé : objet avec la clé {clientVersion}). Si vous souhaitez afficher une collection d'éléments enfants, utilisez plutôt un tableau

Question

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;

Answer 1

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;