É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
P粉178894235
P粉178894235 2024-04-06 16:25:39
0
1
473

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粉178894235
P粉178894235

répondre à tous(1)
P粉566048790

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;
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal