有没有办法避免嵌套的 switch 语句

问题描述

我正在开发一个 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;