recherche

Maison  >  Questions et réponses  >  le corps du texte

É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

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粉178894235P粉178894235331 Il y a quelques jours659

répondre à tous(1)je répondrai

  • P粉566048790

    P粉5660487902024-04-07 11:17:19

    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;

    répondre
    0
  • Annulerrépondre