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

Question

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

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

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

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

3. 我遵循了 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'”。

请帮我解决这个问题。

Answer 1

你需要定义你的函数

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

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

如果是 ES6

const isValidated = () => { }

Answer 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)

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