Javascript 在react js的构造函数中可以使用switch语句吗

我正在使用reactjs和node开发一个网站。我的问题是，我不确定我是否使用了最佳实践来获得预期的结果。在下面的代码中，我想有条件地设置类的初始状态。为此，我在类构造函数中使用了switch语句。我的问题是，有没有比这更好的解决方案？这是获得我需要的东西的最佳实践吗

如有任何建议，将不胜感激

提前谢谢

constructor(props: FeedbackFormProps) {
   super(props);
   const {
     review: { courseReview, studentReview }
   } = props;

   switch (props.isCourseReview) {
      case true:
         this.state = {
            values: {
                ranking: courseReview.length > 0 ? courseReview[0].rate : 
                0,
                comment: courseReview.length > 0 ? 
                courseReview[0].reviewText : ""
           },
           errors: {
             comment: null
           },
           isFeedbackEdit: courseReview.length > 0 ? true : false
       };
       break;
    case false:
       this.state = {
          values: {
              ranking: studentReview.length > 0 ? studentReview[0].rating 
              : 0,
              comment: studentReview.length > 0 ? 
              studentReview[0].comment_en : ""
         },
         errors: {
           comment: null
         },
         isFeedbackEdit: studentReview.length > 0 ? true : false
      };
      break;
  }
 }

---

如果初始化依赖于来自父组件的道具，那么这是一个很好的选择

如果你想让它更干净，你可以在一个“.business”文件中创建一个函数，在这个文件中传递一个参数将返回你想要的状态，在这里只需设置这个状态，让这个函数传递参数

这将使组件更干净，并且您可以隔离要测试的逻辑并确保其正确

我会这样做，我们可以进行更多的重构：

---

您可以通过以下简单方式更改代码：

constructor(props: FeedbackFormProps) {
   super(props);
   const {
     review: { courseReview, studentReview }
   } = props;
   const reviews = studentReview 
   if (props.isCourseReview) reviews = courseReview
   const countReviews = reviews.length
   this.state = {
      values: {
          ranking: countReviews ? reviews[0].rating : 0,
          comment: countReviews ? reviews[0].comment_en : ""
     },
     errors: {
       comment: null
     },
     isFeedbackEdit: countReviews  ? true : false
   }
}

---

构造函数必须尽可能干净。试试这个：

class YourClass extends Component {
    constructor(props: FeedbackFormProps) {
        super(props);

        this.state = this.initState(props);
    }

    initState(props) {
        const {
            review: { courseReview, studentReview }
        } = props;

        let result;

        switch (props.isCourseReview) {
            case true:
                result = {
                    values: {
                        ranking: courseReview.length > 0 ? courseReview[0].rate :
                            0,
                        comment: courseReview.length > 0 ?
                            courseReview[0].reviewText : ""
                    },
                    errors: {
                        comment: null
                    },
                    isFeedbackEdit: courseReview.length > 0 ? true : false
                };
                break;
            case false:
                result = {
                    values: {
                        ranking: studentReview.length > 0 ? studentReview[0].rating
                            : 0,
                        comment: studentReview.length > 0 ?
                            studentReview[0].comment_en : ""
                    },
                    errors: {
                        comment: null
                    },
                    isFeedbackEdit: studentReview.length > 0 ? true : false
                };
                break;
        }

        return result
    }
}

---

您可以使用另一种方式来处理条件

const reviewType = props.isCourseReview ? 'courseReview' : 'studentReview';
const currentReview = props.review[reviewType];
// maybe it's good idea to name it isFeedbackEdit not curentReviewExist
const curentReviewExist = currentReview.length > 0;

this.state = {
   errors: {
     comment: null
   },
   values: {
     ranking: curentReviewExist ? currentReview[0].rate : 0,
     comment: curentReviewExist ? currentReview[0].reviewText : ""
   },
   // curentReviewExist - boolean value
   isFeedbackEdit: curentReviewExist
};

---

在构造函数中使用

开关

并没有本质上的错误，但是当情况为

true

和

false

时，这样做会忽略“if”一词固有的力量

假设“rate”和“rating”之间的区别是一个输入错误，那么您可以将代码简化为：

constructor(props: FeedbackFormProps) {
  super(props);

  const review = props.isCourseReview ? props.review.courseReview[0] : props.review.studentReview[0];
  const isFeedbackEdit = !!review;
  const errors = { comment: null };
  const values = isFeedbackEdit ? {
    ranking: review.rate,
    comment: review.reviewText,
  } : {
    ranking: 0,
    comment: "",
  };
  this.state = { values, errors, isFeedbackEdit };
}

---

创建一个函数，并将所有这些代码保存在其中，然后在构造函数中调用该函数，这样看起来不错