如果我创建一个单页表单并尝试创建一个业务，它可以工作，但当我尝试在多步骤表单中做同样的事情时，它就不行了。我可以看到每个表单的数据，但它只是不成功提交出于某种原因。我使用Redux工具包将数据存储在organizationReducer中。我能做错什么？我是否要为每个表单创建一个单独的表单？

import Stepper from "./components/Stepper";
import Account from "./components/steps/Account";
import Details from "./components/steps/Details";
import Payment from "./components/steps/Payment";
import { useDispatch, useSelector} from "react-redux";
import { useNavigate } from "react-router-dom";
import { createOrganization} from "../../../features/organization/organizationSlice";

const Onboarding = () => {

    const [step, setStep] = useState(0);

    const steps = ["", "", "", ];

    const navigate = useNavigate();
    const dispatch = useDispatch();

    const { 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}/>;
      }
    };

    const handleSubmit = () => {
      if (step === 0) {
        if (formData.businessName === '') {
          toast({
            title: 'Error',
            description: ('Please provide a business name'),
            status: 'error',
            position: 'top-right',
            duration: 3000,
            isClosable: true,
          })
        } else {
          setStep(step + 1);
        }

      } else if (step === 1) {
        if (formData.website === '') {
          toast({
            title: 'Error',
            description: ('Please provide a website'),
            status: 'error',
            position: 'top-right',
            duration: 3000,
            isClosable: true,
          })
        } else {
          setStep(step + 1);
        }
      } else if (step === 2) {
        if (formData.billingName === '') {
          toast({
            title: 'Error',
            description: ('Please provide a billing name'),
            status: 'error',
            position: 'top-right',
            duration: 3000,
            isClosable: true,
          })
        } else {
          dispatch(createOrganization(formData))

        }
      }

    };

    return ( 
    <> 
    { /* Stepper */ } 
     < Stepper steps = {steps} step = {step} /> > 
      {displayStep()} 
      <Flex>
       <Box> 
       {step > 0 && <Button onClick = {() => setStep(step - 1)}>Back< /Button>} 
       </Box> <
        Spacer / >
        <Box>
        <Button onClick = {handleSubmit}> 
        {step === 0 || step === 1 ? "Next" : "Submit"} 
        </Button>

这是其中一种形式，它们看起来都是这样的

import { Center, Heading, Box, FormLabel, Select, Input, Text } from "@chakra-ui/react";

export default function Account({ formData, setFormData }) {

  return (
    <div>
      <Box w="100%" mb={4}>
        <FormLabel ml={2} fontWeight="bold" fontSize="15px">
          Business Name
        </FormLabel>
        <Center>
        <Input
          w="500px"
          fontSize="14"
          name="businessName"
          onChange={(e) => {setFormData({...formData,businessName: e.target.value,});
          }}
          value={formData.businessName}
          type="name"
        />
        </Center>
      </Box>
      <Box w="100%" mb={4}>
        <FormLabel ml={2} fontWeight="bold" fontSize="15px">
          Business Email
        </FormLabel>
        <Center>
        <Input
          w="500px"
          fontSize="14"
          name="businessEmail"
          onChange={(e) => {
            setFormData({
              ...formData,
              businessEmail: e.target.value,
            });
          }}
          value={formData.businessEmail}
          type="email"
        />
        </Center>
      </Box>
      <Box w="100%" mb={4}>
        <FormLabel ml={2} fontWeight="bold" fontSize="15px">
          Currency
        </FormLabel>
        <Center>
        <Select
          w="500px"
          fontSize="14"
          placeholder="Select option"
          onChange={(e) => {
            setFormData({
              ...formData,
              currency: e.target.value,
            });
          }}
          value={formData.currency}
          name="currency"
        >
          <option value="founder">USD</option>
          <option value="engineer">Naira</option>
          <option value="engineer">Pounds</option>
          <option value="engineer">Yen</option>
          <option value="engineer">Euros</option>
          <option value="engineer">Cedis</option>
        </Select>
        </Center>
      </Box>
      <Box w="100%" mb={4}>
        <FormLabel ml={2} fontWeight="bold" fontSize="15px">
          Industry
        </FormLabel>
        <Center>
        <Select
          w="500px"
          fontSize="14"
          placeholder="Select option"
          onChange={(e) => {
            setFormData({
              ...formData,
              industry: e.target.value,
            });
          }}
          value={formData.industry}
          name="industry"
        >
          <option value="founder">Blockchain</option>
          <option value="engineer">Engineering</option>
          <option value="engineer">Fintech</option>
        </Select>
        </Center>
      </Box>
      <Box w="100%" mb={4}>
        <FormLabel ml={2} fontWeight="bold" fontSize="15px">
          Business Description
        </FormLabel>
        <Center>
        <Input
          w="500px"
          fontSize="14"
          name="businessDescription"
          onChange={(e) => {
            setFormData({
              ...formData,
              businessDescription: e.target.value,
            });
          }}
          value={formData.businessDescription}
          type="text"
        />
        </Center>
      </Box>
      <Box w="100%" mb={4}>
        <FormLabel ml={2} fontWeight="bold" fontSize="15px">
          Use Case
        </FormLabel>
        <Center>
        <Input
          w="500px"
          fontSize="14"
          name="useCase"
          onChange={(e) => {
            setFormData({
              ...formData,
              useCase: e.target.value,
            });
          }}
          value={formData.useCase}
          type="text"
        />
        </Center>
      </Box>
    </div>
  );
}

store.js

import organizationReducer from "../features/organization/organizationSlice";

export const store = configureStore({
  reducer: {
    organization: organizationReducer
  },
});