Question

我有一个方法handleNavigate用于“下一个和上一个”按钮的动作逻辑。每个操作调用setState取决于selectedStepId的数量。如果条件之一为真，我将调用setState，组件重新渲染，然后再次进入handleNavigate方法，并进行无限渲染。简而言之，第一种情况：我单击下一步-> selectedStepId等于0-> setState调用（组件重新渲染）-> selectedStepId等于1。第二种情况：我单击上一个-> selectedStepId等于1-> setState调用（组件重新渲染）-> selectedStepId等于1。

如何将两种动作的逻辑结合起来，避免无限次的渲染调用，什么是正确的条件（或者可能是生命周期方法），我试图找出如何实现这一目标但没有成功。我需要以某种方式检测它是否是“下一个”或“上一个”动作，并在我的方法中执行适当的逻辑。还是在我看来不可能？

Parent component: 
 handleNavigate = () => {
        const { selectedStepId } = this.state
        if (condition ) {
            ...huge amount of logic for 'next' action
        } else {
            ...huge amount of logic for 'previous' action
        }
   return Promise.resolve() //method should return promise (for common component)
}

Child component:
 // Get onNavigate property from parent
   <WizardSteps
   title={currentWizardStepTitle}
   selectedStepId={selectedStepId}
   steps={wizardStepsModel}
   onNavigate={onNavigate}

//onNavigate callback detects all navigation occurs (previous or next)
/>

如何在没有无限渲染的情况下将两种逻辑动作组合在一种方法中？

0 个答案: