React.Условный рендеринг

Question

У меня есть компонент React:

class SignUpStepTwo extends Component {
constructor(props) {
        super(props);
        this.state = {
            isTherapistUpdated: false,
            isProfessionalInfoAdded: false,
            }
        }
     }
render() {
        if (!this.state.isTherapistUpdated) {
            return (
                <StepTwoPersonalInfo />
            );
        }
        else if (this.state.isTherapistUpdated) {
            return (
                <StepTwoProfessionalInfo/>
            );
        }
        else if (this.state.isProfessionalInfoAdded && 
                 this.state.isTherapistUpdated) {
            return (
                <StepTwoTermsOfUse/>
            );
        }
    }
}

export default SignUpStepTwo;

И я пытаюсь изменить флаги bool и условно вывести мои компоненты.Но последний if никогда не выполняется, а компонент <StepTwoTermsOfUse/> не отображается.

Answer 1

Это потому, что второе условие выполняется, даже если true.Stete.isProfessionalInfoAdded и isTherapistUpdated имеют значение true.

Чтобы сделать это, вы должны поставить третье условие перед вторым. Кроме того, я немного реструктурировал ваш код, чтобы пропустить ненужные проверки:

if (this.state.isProfessionalInfoAdded && this.state.isTherapistUpdated) {
  return (
      <StepTwoTermsOfUse/>
  );
}

if (this.state.isTherapistUpdated) {
  return (
      <StepTwoProfessionalInfo/>
  );
}

return (
    <StepTwoPersonalInfo />
);

Answer 2

Я думаю, что если вы используете временную переменную для установки логического результата, код будет немного чище ...

class SignUpStepTwo extends Component {

    constructor(props) {
        super(props);
        this.state = {
            isTherapistUpdated: false,
            isProfessionalInfoAdded: false,
        }
    }

    render() {
        let render = (
          (!this.state.isTherapistUpdated) ? <StepTwoPersonalInfo /> :
          (this.state.isTherapistUpdated && this.state.isProfessionalInfoAdded) ? <StepTwoTermsOfUse/> :
          <StepTwoProfessionalInfo />
        );
        return render;
    }
}

export default SignUpStepTwo;

Answer 3

Вы должны поменять свои последние два утверждения. Второе утверждение if в вашем вопросе удовлетворяет, если 3-е удовлетворяет также. Таким образом, секунды заставляют функцию выйти.

class SignUpStepTwo extends Component {
constructor(props) {
        super(props);
        this.state = {
            isTherapistUpdated: false,
            isProfessionalInfoAdded: false,
            }
        }
     }
render() {
        if (!this.state.isTherapistUpdated) {
            return (
                <StepTwoPersonalInfo />
            );
        }
        if (this.state.isProfessionalInfoAdded) {
            return (
                <StepTwoTermsOfUse/>
            );
        }

        return (
            <StepTwoProfessionalInfo/>
        );
    }
}

export default SignUpStepTwo;

Что это делает:

• Если isTherapistIsUpdated === false, то рендер StepTwoPersonalInfo
• Если isTherapistIsUpdate === true (подразумевается, потому что первое, если не совпадает) И isProfessionalInfoAdded === true, тогда рендер StepTwoTermsOfUse
• В любом другом случае, что означает isTherapistIsUpdated === true И isProfessionalInfoAdded === false, рендер StepTwoProfessionalInfo

Answer 4

Вы должны поставить последний, если первым, и он должен работать!