IsValidated 在 react stepzilla 中不能与 redux 一起使用

Posted 2023-02-19

【中文标题】IsValidated 在 react stepzilla 中不能与 redux 一起使用

【英文标题】：IsValidated not working with redux in react stepzilla

【发布时间】：2019-01-29 09:32:40

【问题描述】：

我使用 react-stepzilla 开发了多步骤注册表单。我在此注册中使用了 react 和 redux。

我需要验证这些步骤，我按照这些步骤将验证添加到步骤中

我在步骤中添加了 isValidated 函数。

它在 react 中工作，但在 redux 中无法使用 react 可能是 react-stepzilla 是 HOC 的问题。

我遵循了 react-stepzilla 模块 git 解决方案，但出现错误 "main.js:318 Uncaught TypeError: Cannot read property 'isValidated' of undefined"

//React stepzilla main component

const steps = [
	 name: 'step1', component: <RegistrationType /> ,
	 name: 'step2', component: <PersonalDetails /> ,
	 name: 'step3', component: <ContactDetails /> 
]

class MultiStep extends Component 
	render() 
		return (
			<Fragment>
				<h1 className="page-header">Register for New Account</h1>
				<StepZilla
					steps=steps
					stepsNavigation=true
					nextButtonText='Save and Continue'
					backButtonText='Back'
					nextButtonCls="btn btn-warning active pull-right mr-0"
					backButtonCls="btn btn-primary pull-left ml-25"
          hocValidationAppliedTo= [0,1, 2]
				/>

			</Fragment>
		);
	

//Step1 Component:


// Checking the validation for registration
	isValidated()
		alert("checking isValidated calling")
		return this.state.count > 2
	
  
 // connecting with redux 
 export default  connect((state) => (register_reducer: state.register_reducer.register_user),saveUser)(Step1); //This is not working and getting the error 
 
 //connecting without redux
 export default Step1 // this is working and checking the validation part

当我们与 redux 连接时，我收到错误“无法读取未定义的属性 'isValidated'”。

请帮我解决这个问题。

【参考方案1】：

你需要定义你的函数

function isValidated()
    alert("checking isValidated calling")
    return this.state.count > 2

您需要在函数名称前添加function。

如果是 ES6

const isValidated = () =>  

【参考方案2】：

由于connect() 函数总是返回一个 new 组件并且它不会有你编写的isValidated 方法，所以它可以在不连接 Redux 的情况下工作。

您可以在MultiStep 组件中使用connect() 函数并将props 传递给子组件。你可以看到我的代码：

...

class MultiStep extends Component 
    render() 
        const example = this.props

        const steps = [
             name: 'step1', component: <RegistrationType ...example /> ,
             name: 'step2', component: <PersonalDetails /> ,
             name: 'step3', component: <ContactDetails /> 
        ]

        return (
            <Fragment>
                <h1 className="page-header">Register for New Account</h1>
                <StepZilla
                    steps=steps
                    stepsNavigation=true
                    nextButtonText='Save and Continue'
                    backButtonText='Back'
                    nextButtonCls="btn btn-warning active pull-right mr-0"
                    backButtonCls="btn btn-primary pull-left ml-25"
          hocValidationAppliedTo= [0,1, 2]
                />

            </Fragment>
        );
    

..
...

export connect(mapStateToProps, mapDispatchToProps)(MultiStep)

【参考方案3】：

您可以这样做，将道具发送到您的步骤，而不是使用 redux 连接。这是超长的代码，但它可能对一些人有所帮助，了解正在发生的事情。

    class MultiStep extends Component 
      render() 

        const steps = [
           name: "General Info", component: <StepOne ...this.props /> ,
           name: "Personal Info", component: <StepTwo ...this.props /> ,
           name: "Educational Info", component: <StepThree ...this.props /> ,
           name: "Address", component: <StepFour ...this.props /> ,
           name: "Account Info", component: <StepFive ...this.props /> ,
           name: "Review", component: <StepSix ...this.props /> ,
           name: "Done", component: <StepSix ...this.props /> 
        ];

        return (
          <StepZilla
            steps=steps
            stepsNavigation=true
            nextButtonText="Save and Continue"
            backButtonText="Back"
            //hocValidationAppliedTo=[0, 1, 2, 3, 4, 5, 6] //commenting this worked for me.
            nextButtonCls="btn btn-prev pull-right nextBtn btn-color"
            backButtonCls="btn btn-next btn-color"
          />
        );
      
    

    // export default MultiStep;
    const mapStateToProps = state => (
      errors: state.errors
    );

    const mapDispatchToProps = 
      setGeneralInfo,
   ;

    export default connect(
      mapStateToProps,
      mapDispatchToProps
    )(MultiStep);

在步骤中，您可以在组件中编写 isValidated 方法。

  isValidated = () => 
    const genInfo = 
      employee_name: this.state.employee_name,
      employee_code: this.state.employee_code,
      employee_email: this.state.employee_email,
      password: this.state.password,
   ;
    console.log(genInfo);
    this.props.setGeneralInfo(genInfo, this.props.jumpToStep);
    return false; // make it return false. just in case. lol

  ;

在你的行动中

export const setGeneralInfo = (generalDetails, jumpToStep) => dispatch => 
  console.log("gen details:", generalDetails);
  Api.setGeneralInfo(generalDetails)
    .then(res => 
      console.log("res gen details:", res);
      jumpToStep(1); //<<<< JUMP STEPS FROM HERE <STEPS START FROM 0>

      return dispatch(
        type: SET_GENERAL_INFO,
        payload: res.data
      );
    )
    .catch(err => 
      //jumpToStep(0);
      console.log("err gen details:", err.response);
      return dispatch(
        type: GET_ERRORS,
        payload: err.response.data
      );
    );
;