Блог

Я работаю над проектом React, используя вложенные инструкции switch для маршрутизации пользователя в зависимости от их выбора. В первом случае есть еще два вложенных оператора switch. Во втором случае есть один вложенный оператор switch. Есть ли другой способ, которым я мог бы сделать это без всех вложенных операторов switch? Мы будем очень признательны за любую помощь.

 clickConfirm = () => {
        switch (this.props.serviceType) {
            case 'car_service':
                switch (this.props.loadType) {
                    case 0: 
                        switch (this.props.photoMode) {
                            case 0:
                                this.props.push('/payment/');
                                break;
                            case 1:
                                this.props.push('/payment/');
                                // capture image here
                                break;
                            case 2:
                                this.props.push('/capture/');
                                break;
                        }
                        break;
                    case 1:
                        switch (this.props.photoMode) {
                            case 0:
                                this.props.history.push('/address/');
                                this.props.setToPhoneNumber(false);
                                break;
                            case 1:
                                this.props.history.push('/address/');
                                this.props.setToPhoneNumber(false);
                                // capture image here
                                break;
                            case 2:
                                this.props.push('/capture/');
                                break;
                        }
                        break;
                    case 2:
                        this.props.history.push('/phone/');
                        this.props.setToPhoneNumber(true);
                        break;
                }
                break;
            case 'phone_service':
                switch (this.props.photoMode) {
                    case 0:
                        this.props.history.push('/address/');
                        break;
                    case 1:
                        this.props.history.push('/address/');
                        // capture image here
                        break;
                    case 2: 
                        this.props.history.push('/capture/');
                        break;
                }
                break;
        }
    };
 

Вы можете хранить данные в таком объекте, как этот:

 const SERVICES = {
 'car_service': {
      0: {
          0: ()=> {
              this.props.push('/payment/');
           }
       }
  }
}
 

Затем вы можете заменить switch деталь на:

 clickConfirm = () => {
 SERVICES[this.props.serviceType][this.props.loadType][this.props.photoMode]();
}
 

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

Но, не зная вашего варианта использования или того, почему вы «подталкиваете к реквизиту» (?), просто чтобы «сгладить» свое состояние, вы могли бы объединить различные значения и перечислить известные комбинации.

ПРИМЕЧАНИЕ: Я не тестировал это и не пытался точно сопоставить это с вашими условиями, но общая идея…

 const combined = [this.props.serviceType, this.props.photoMode, this.props.loadType || 'NA'].join('|');

switch (combined) {
    case 'car_service|0|0':
        this.props.push('/payment/'); break;
    case 'car_service|1|0':
        this.props.push('/payment/'); break; // capture image here
    case 'car_service|2|0':
        this.props.push('/capture/'); break;
    case 'car_service|0|1':
        this.props.push('/address/'); this.props.setToPhoneNumber(false); break;
    case 'car_service|1|1':
        this.props.push('/address/'); this.props.setToPhoneNumber(false); break;  // capture image here
    case 'car_service|2|1':
        this.props.push('/capture/'); break;
    case 'car_service|0|2':
    case 'car_service|1|2':
    case 'car_service|2|2':
        this.props.history.push('/phone/'); this.props.setToPhoneNumber(true); break;
    case 'phone_service|0|NA':
        this.props.history.push('/address/'); break;
    case 'phone_service|1|NA':
        this.props.history.push('/address/'); break; // capture image here
    case 'phone_service|2|NA':
        this.props.history.push('/address/'); break;