잘못된 React 하위 요소(발견: {clientVersion} 키가 있는 개체) 하위 요소 컬렉션을 렌더링하려면 대신 배열을 사용하세요.
다단계 양식이 있는데 제출하려고 하면 이 오류가 표시됩니다. 그러나 간단한 형식으로 createOrganization 일정을 사용하면 작동합니다. 백엔드 문제인가요, 프론트엔드 문제인가요? 내가 무엇을 잘못할 수 있었나요? 어떤 조언이라도 감사하겠습니다
Onboarding.jsx
으아악Slice.jsx 정리
으아악Organization Service.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>