国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

我正在嘗試創(chuàng)建一個(gè)多步驟表單，我將數(shù)據(jù)放在一個(gè)單獨(dú)的文件中，用于這樣的常量

從“react”導(dǎo)入{lazy}；

export const steps = [
  {
    id: 0,
    name: 'Personal Info',
    component: lazy(() => import('../components/PersonalInfo')),
  },
];

我將它傳遞給上下文中的自定義掛鉤

const dataSteps = useMultiStep(steps);

const { next, back, currentStep, isFirst } = dataSteps;

這是自定義掛鉤

import { useState } from 'react';
import { MultistepProps } from '../@types/Multiform';

const useMultiStep = (steps: MultistepProps[]) => {
  const [step, setStep] = useState(0);

  const isLast = step === steps?.length - 1;
  const isFirst = step === 0;

  const next = (): void => {
    if (isLast) return;
    setStep((current) => current + 1);
  };

  const back = (): void => {
    if (isFirst) return;
    setStep((current) => current - 1);
  };

  return {
    step,
    next,
    back,
    currentStep: steps[step],
    isFirst,
  };
};

export default useMultiStep;

我在這里使用動(dòng)態(tài)組件

import FormInterface from './interface/FormInterface';
import useApp from './hooks/useApp';
import { Suspense } from 'react';
function App() {
  const data = useApp();

  const { currentStep, next, back, isFirst } = data;

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();

    next();
  };

  return (
    <FormInterface>
      <form
        onSubmit={handleSubmit}
        className="flex flex-col h-full py-5 group"
        noValidate={true}
      >
        {currentStep.component && (
          <>
            <h1 className="text-3xl font-bold text-marineBlue">
              {currentStep?.name}
            </h1>

            <Suspense fallback={<div>Loading...</div>}>
              <currentStep.component /> //here
            </Suspense>

            <div
              className={`mt-4 sm:mt-auto flex ${
                isFirst ? 'justify-end' : 'justify-between'
              }`}
            >
              <button
                type="button"
                className={`hover:text-marineBlue font-bold text-coolGray py-2 px-5 rounded-md text-[13px] ${
                  isFirst ? 'hidden' : 'block'
                }`}
                onClick={back}
              >
                Go Back
              </button>
              <button
                type="submit"
                className="hover:bg-purplishBlue bg-marineBlue text-white py-2 px-5 rounded-md text-[12px] group-invalid:pointer-events-none group-invalid:opacity-30 self-end"
              >
                Next Step
              </button>
            </div>
          </>
        )}
      </form>
    </FormInterface>
  );
}

export default App;

我的vite配置是這樣的

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
});

嘗試了所有方法后，我仍然遇到此錯(cuò)誤，不是第一次渲染，而是組件重新加載時(shí)出現(xiàn)

App.tsx:7 未捕獲類(lèi)型錯(cuò)誤：無(wú)法解構(gòu)“data”的屬性“currentStep”，因?yàn)樗鼮榭铡? 在應(yīng)用程序 (App.tsx:7:11) 在 renderWithHooks (react-dom.development.js:16305:18) 在 mountInminatedComponent (react-dom.development.js:20074:13) 在開(kāi)始工作（react-dom.development.js：21587：16） 在 HTMLUnknownElement.callCallback2 (react-dom.development.js:4164:14) 在 Object.invokeGuardedCallbackDev (react-dom.development.js:4213:16) 在 invokeGuardedCallback (react-dom.development.js:4277:31) 在 beginWork$1 (react-dom.development.js:27451:7) 在 PerformUnitOfWork (react-dom.development.js:26557:12) 在工作LoopSync (react-dom.development.js:26466:5)

我相信這是一個(gè)人力資源管理問(wèn)題，因?yàn)樗拖窦虞d整個(gè)頁(yè)面，僅包含組件，因?yàn)闋顟B(tài)丟失，并且 useMultisteps 上的信息丟失，但我只是找不到一種方法來(lái)實(shí)現(xiàn)它工作，請(qǐng)幫助我，教我更好的方法來(lái)完成我想做的事情