React Stepper Component既可以对每个步骤执行验证，又可以在单击下一步时不进行网络错误检查？

问题描述

我下面有一个步进器组件

import { Card,CardBody,TabContent,TabPane,Button } from 'reactstrap'
import Stepper from '@material-ui/core/Stepper'
import Step from '@material-ui/core/Step'
import StepLabel from '@material-ui/core/StepLabel'
import { commonSelector } from 'store/ducks/common/selectors'
import { setStepperConfig,actions } from 'store/ducks/common/slice'
import { useSelector,useDispatch } from 'react-redux'
interface PageProps {
  children: React.ReactNode
  stepDetails: any[]
  goToStep: (e: number) => Promise<boolean>
  nextStep: (e: number) => Promise<boolean>
  prevStep: (e: number) => Promise<boolean>
  currentStep?: number
  validStep?: boolean
}
const Wizard: React.FC<PageProps> = props => {
  const {
    stepperConfig: { step },} = useSelector(commonSelector)
  const stepperElements = React.Children.toArray(props.children)
  const [activeStep,setActiveStep] = useState(0)
  const dispatch = useDispatch()
  const handleNextStep = async (index: number) => {
    let valid
    valid = await props.nextStep(index + 1)
    // if (valid && !state.networkError)
    //   setActiveStep(prevActiveStep => prevActiveStep + 1)
    if (valid) {
      dispatch(setStepperConfig(index + 1,valid,'next'))
      // setActiveStep(prevActiveStep => prevActiveStep - 1)
    } else
      dispatch(actions.saveStepperConfig({ step: index,validStep: valid }))
  }
  // useEffect(() => {
  //   if (state.networkError !== null) {
  //     if (direction === 'next') handleNextStep(activeStep)
  //     else if (direction === 'back') handleBackStep(activeStep)
  //   }
  // },[state.networkError])
  const handleBackStep = async (index: number) => {
    let valid
    valid = await props.nextStep(index + 1)
    if (valid) {
      dispatch(setStepperConfig(index - 1,'prev'))
      // setActiveStep(prevActiveStep => prevActiveStep - 1)
    } else dispatch(setStepperConfig(index,'prev'))
  }

  // const stepClick = (index: number) => {
  //   setActiveStep(index)
  //   props.goToStep(index)
  // }
  return (
    <div className="">
      <Card className="card-default">
        <CardBody>
          <Stepper activeStep={step}>
            {props.stepDetails.map((item: any,index: any) => (
              <Step key={index}>
                <StepLabel>{item.title}</StepLabel>
              </Step>
            ))}
          </Stepper>
        </CardBody>
        <TabContent activeTab={step}>
          {stepperElements.map((item: any,index: number) => (
            <TabPane key={index} tabId={index}>
              {item}
              <hr />
              <div className="d-flex">
                {index !== 0 ? (
                  <Button
                    color="secondary"
                    onClick={e => handleBackStep(index)}
                  >
                    Previous
                  </Button>
                ) : null}
                <Button
                  className="ml-auto"
                  color="primary"
                  onClick={e => handleNextStep(index)}
                >
                  {activeStep === stepperElements.length - 1
                    ? 'Save & Finish'
                    : 'Save & Next'}
                </Button>
              </div>
            </TabPane>
          ))}
        </TabContent>
      </Card>
    </div>
  )
}

export default Wizard

setStepperConfig 已挂接到此传奇->

function* saveStepperConfig({
  payload: { step,type },}: ReturnType<typeof setStepperConfig>) {
  try {
    console.log('before')
    if (type === 'next') yield take(actions.saveNetworkError.type)
    console.log('after')
    const state = yield select(commonSelector)
    if (!state.networkError) {
      yield put(actions.saveStepperConfig({ step,validStep: valid }))
    }
  } catch (err) {
    console.log('err',err)
  }
}

立即流->单击“保存并下一步”按钮后->调用props.nextStep，它通过引用进行当前步骤验证并返回有效或无效（步骤），-> setStepperConfig等待没有网络错误操作被调度并继续流

Requirement->这真的很笨拙，想要一种干净且通用的方式来处理每个步骤的验证+每个步骤的网络错误验证（如果该步骤有一个API调用）以继续进行进一步的步骤

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）