Question

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

我需要验证步骤，然后按照以下步骤将验证添加到步骤中

我在步骤中添加了isValidated函数。
它可以在react中工作，但不能在redux中与react一起工作，可能是react-stepzilla是HOC问题。
我遵循了react-stepzilla模块git解决方案，但出现错误 “ main.js：318 Uncaught TypeError：无法读取未定义的属性'isValidated'”

//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'”。

请帮助我解决这个问题。

Answer 1

您需要定义功能

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

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

如果是ES6

const isValidated = () => { }

Answer 2

由于connect()函数始终返回一个 new 组件，因此它无需连接Redux就可以正常工作，并且不会具有您编写的isValidated方法。

您可以在connect()组件上使用MultiStep函数，并将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)

Answer 3

您可以执行以下操作，将道具发送到您的步骤，而不是使用redux connect。这是超长的代码，但可以帮助一些人了解正在发生的事情。

    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
      });
    });
};

IsValidated无法在React Stepzilla中使用Redux

3 个答案: